複数の単一ファイルコンポーネントとVue Webpackテンプレート

Question

私はhttps://github.com/vuejs-templates/webpackを使用して単純なVueサイトを設定しました。このテンプレートには、単一のファイルコンポーネント（App.vue）が付属しています。私は、どのように複数の単一のファイルコンポーネントでサイトを構築するのか把握しようとしていますか？

たとえば、4つの単一ファイルコンポーネントを持つWebページがあるとします。テーブルデータを並べ替えてページ設定できるテーブルコンポーネント、テーブルデータをフィルタするフィルタコンポーネント、数値を持つボタンコンポーネント新規/編集/削除のようなボタン、および選択されたときに使用可能なフィルタとテーブル内のデータを交換するオプションがドロップダウン表示されたヘッダコンポーネントです。

私は4つの.vueページ（Table.vue、Filter.vue、Button.vue、およびHeader.vue）を作成すると仮定しますが、それらをすべて同じページに含める方法はあまりありません。 App.vueを他の4つの単一ファイルコンポーネントのコンテナとして使用すると仮定しますが、他の4つの.vueページをApp単一ファイルコンポーネントに含める方法がわかりません。 main.jsにそれらへの参照があるべきですか？

Answer 1

は、あなたがそれらを使用している方の親コンポーネントの定義にそれらをインポートし、親コンポーネントのcomponentsプロパティに登録：

import MyTable from 'path/to/Table' 
import MyFilter from 'path/to/Filter' 
import MyButton from 'path/to/Button' 
import MyHeader from 'path/to/Header' 

export default { 
    components: { MyTable, MyFilter, MyButton, MyHeader }, 
} 

その後、あなたは親コンポーネントのテンプレートに自分のタグを使用することができます。

<my-table></my-table> 
<my-filter></my-filter> 
<my-button></my-button> 
<my-header></my-header> 

---

また、あなたはmain.jsでグローバルに登録できます。

import Table from 'path/to/Table' 

Vue.component('my-table', Table); 

このようにして、任意のコンポーネントに<my-table>タグを使用すると、そのコンポーネントに登録する必要がなくなります。