コンポーネントとは
- ページを構成するUI部品
- 再利用可能なVueインスタンス
- HTMLのテンプレートとJavaScriptのロジックを持つ
Vue.jsのコンポーネントの特徴
- 再利用ができる
- メンテナンス性が高まる
- テンプレートとJavaScriptが1つのセットになっていて管理がしやすい
コンポーネント定義（グローバル）
Vue.componentメソッドで生成されたコンポーネントは全てのVueインスタンスから利用できる
第一引数にコンポーネント名、第二引数のtemplateに表示させるテンプレートを記述する。
また、コンポーネントはVueインスタンス生成よりも前に定義する
js
Vue.component('hello-component', {
template: '<p>Hello</p>'
})
// インスタンス生成より上に記述
var app = new Vue({
el: '#app',
})
HTMLにタグを挿入してコンポーネントの表示ができる
html
<!-- <p>Hello</p> -->
<hello-component></hello-component>
コンポーネント定義（ローカル）
特定のVueインスタンス配下でしか利用できないようにローカル定義もできる
定義したコンポーネントはcomponentsオプションに定義することにより利用できる
また、グローバルでの定義と同様、Vueインスタンス生成よりも前に定義する
js
var helloComponentLocal = {
template: '<p>Hello</p>'
}
var app = new Vue({
el: '#app',
components: { // 利用するタグ : 定義した変数
'hello-component-local': helloComponentLocal
}
})
html
<!-- <p>Hello</p> -->
<hello-component-local></hello-component-local>
コンポーネント名のルール
ハイフンを一つ以上含むケバブケースを利用する必要がある
<vue-component></vue-component> <!-- OK -->
<component></component> <!-- NG -->
<vueComponent></vueComponent> <!-- NG -->
将来的に追加されるHTMLタグと衝突しないようにケバブケースを採用しているらしい
コンポーネントオプション
以下のようなボタンをクリックするとクリック数をカウントするコンポーネントがあるとする
Vue.component('button-counter', {
data: function () {
return {
count: 0
}
},
template: '<button v-on:click="count++">{{ count }}</button>'
})
<!-- クリック数のカウントは、各コンポーネントが独自に保有できる -->
<button-counter></button-counter>
<button-counter></button-counter>
<button-counter></button-counter>
各インスタンスが独自のデータを利用できる
コンポーネントが作成されるたびに、新しいインスタンスが作成されるので、各インスタンスが独自のデータオブジェクトを利用できるようになる
同じコンポーネントでも、各インスタンスが独自のデータを利用できるようにdataは関数である必要がある
いろんなオプション使えるよ
その他にもnew Vue()する時と同じオプションが利用できる
※elのようなルート保有のオプションを除く
補足
テンプレートのルート要素は単一である必要がある
複数の要素を使用したい時はdivタグなどで囲う必要がある
複数の要素でコンポーネントを定義したい時はテンプレートリテラル使うと便利
template:
`<div> <!-- テンプレートリテラルも使える -->
<span>count: </span><button v-on:click="count++">{{ count }}</button>
</div>`
まとめ
コンポーネント楽しい