コンポーネント化
コンポーネントとして部品化することができます。 構造化できるのでメンテナンス性が上がることが期待されます。
アイテム表示の機能をコンポーネントとして定義してみます。
Vue.component('item-component', {
template: '<div><input type="checkbox" key="item.title" v-model="item.checked"><span :style="{ textDecoration: item.checked ? \'line-through\' : \'none\' }">{{item.title}}</span></div>',
props: ['item'],
});
templateはこのコンポーネントが提供するHTMLテンプレートで、
propsはこのテンプレートが入力として受け取るプロパティです。
これを使うにはHTMLを次のようにします。
<li v-for="item in items">
<item-component :item="item" />
</li>
:itemでプロパティを渡しています。
これでテンプレートを使って動かすことができました。
ところで、コンポーネントはone-way data flowが基本なので、v-modelを使うのは好ましくないかもしれません。
そこで、明示的にイベント通知する仕組みでコンポーネントを書いてみます。
Vue.component('item-component', {
template: '<div><input type="checkbox" key="item.title" :checked="item.checked" @change="toggle"><span :style="{ textDecoration: item.checked ? \'line-through\' : \'none\' }">{{item.title}}</span></div>',
props: ['item'],
methods: {
toggle: function() {
this.$emit('toggle');
}
},
});
v-modelではなく:checkedすなわちv-bind:checkedでチェックボックスの状態を入力しています。
一方、変更時は@changeすなわちv-on:changeで検知してtoggleイベントを発行しています。
このコンポーネントを使う場合はHTMLを次のようにします。
<li v-for="item in items">
<item-component :item="item" @toggle="item.checked = !item.checked"/>
</li>
@toggleすなわちv-on:changeでtoggleイベントのイベントハンドラを指定して値を変更しています。
(備考) この例はコンポーネントの学習としては適さないかもしれません。詳しくは公式ガイドを参照しましょう。
課題
- 上記の動作を確認する
- (挑戦) コンポーネントにさらに機能を追加してみる