Vue.js単一ファイルコンポーネントを読み込む

Question

Vue.jsを初めて使用していて、単一ファイルコンポーネントを使用したいが、私はワークフローを理解していない。

例えば、私は三つの成分を有する：App、GridとList

App.vue

<template> 
    <div id="app"> 
     <div id="grid"></div> 
     <div id="right"></div> 
    </div> 
</template> 

<script> 
    export default { 
     name: 'app', 
     data() { 
      return { 
       message: 'Hello Vue!' 
      } 
     } 
    } 
</script> 

をGrid.vue

<template> 
    <div id="left"></div> 
</template> 

<script> 
    export default { 
     name: 'grid', 
     data: function() { 
      return { 
       grid: 'some-data' 
      } 
     } 
    } 
</script> 

List.vue

<template> 
    <div id="right"></div> 
</template> 

<script> 
    export default { 
    name: 'list', 
    data: function() { 
     return { 
      text: 'some-text' 
     } 
    } 
} 
</script> 

Main.js

import Vue from 'vue' 
import App from './vue/App.vue' 
import Grid from './vue/Grid.vue' 
import PatternList from './vue/PatternList.vue' 

new Vue({ 
    el: '#app', 
    render: h => h(App) 
}); 

new Vue({ 
    el: '#grid', 
    render: h => h(Grid) 
}); 

new Vue({ 
    el: '#right', 
    render: h => h(PatternList) 
}); 

それは動作しますが、私は、これは、ネストされたコンポーネントを作成するための正しい方法ではありません願っています。

誰かがそれを行うべき方法を示すことができますか？おかげ

Answer 1

あなたがVue.component methodを使用してコンポーネントを登録できます。

import Vue from 'vue' 
import App from './vue/App.vue' 
import Grid from './vue/Grid.vue' 
import PatternList from './vue/PatternList.vue' 

Vue.component('grid', Grid); 
Vue.component('pattern-list', PatternList); 

new Vue({ 
    el: '#app', 
    render: h => h(App) 
}); 

をそして、直接自分のタグ名を使用してAppテンプレートに追加します：

<template> 
    <div id="app"> 
    <grid></grid> 
    <pattern-list></pattern-list> 
    </div> 
</template> 

これはどんなことを意味し、グローバルなコンポーネントを登録しますVueインスタンスは、これらのコンポーネントを追加設定なしでテンプレートに追加できます。

---

ます。また、そうのように、コンポーネントのVueのインスタンスに登録することができます

new Vue({ 
    el: '#app', 
    render: h => h(App), 
    components: { 
    'grid': Grid, 
    'pattern-list': PatternList 
    } 
}); 

または単一のファイル・コンポーネントのscriptタグ内：

<script> 
import Grid from './vue/Grid.vue' 

export default { 
    name: 'app', 
    components: { 
    'grid': Grid, 
    'pattern-list': PatternList 
    } 
}); 
</script> 

これは、コンポーネントを登録しますそのVueインスタンスに対してのみ使用できます。つまり、登録されたコンポーネントは、そのVueインスタンスのテンプレート内でのみ使用できます。子コンポーネントは、それらのコンポーネントが子Vueインスタンスにも登録されていない限り、登録されたコンポーネントにアクセスすることはできません。