コンポーネントの利用
繰り返し使えるVueインスタンス のことをVueにおいてはコンポーネントと言います。
<div id="example">
<button-like></button-like>
</div>
Vue.component('button-like', {
template: '<button>いいね！</button>',
});
new Vue({
el: '#example',
});
カウンターの実装を例に
Vue.component("button-like", {
template:
`<button @click='countUp'>
いいね！{{count}}
</button>`,
data() {
return {count: 0};
},
methods: {
countUp() {
this.count += 1;
},
}
})
dataオプションは、コンポーネントではオブジェクトを返す関数にしておく必要がある。
この辺の書き方結構しんどい印象があるが慣れの問題か。
`<button @click='countUp'>
いいね！{{count}}
</button>`,
グローバル登録
Vue.componentメソッドで作成したコンポーネントは、グローバル登録 されます。ルートのVueインスタンス内の、どこでも使えるということです。
ローカル登録
全部グローバル登録で使えるというのはよくない感じがするので、そういう時は範囲を絞ったローカル登録を使用します。
ローカル登録したいコンポーネントは、Vueインスタンスではなく、※※普通のオブジェクトとしてまず定義します。**
const button1 = {
template: `
<button>ローカル１</button>
`,
};
const button2 = {
template: `
<button>ローカル２</button>
`,
};
その後、グローバル登録できるコンポーネントに、componentsオプションで指定します。
Vue.component("global-buttons", {
components: {
"button-one": button1,
"button-two": button2,
},
template: `
<div>
<button-one></button-one>
<button-two></button-two>
</div>
`
})
ハイフンを入れる関係で、オブジェクトのキーは文字列を明示しなければならない…。
{
"button-one": button1,
"button-two": button2,
},
Propsを使用したデータ渡し
propsオプションを使用します。
const button1 = {
props: ["title", "count"],
template: `
<button>{{title + " " + count}}</button>
`,
};
<button-one title="プロップス！" count="12"></button-one>
データ型に注意
普通に属性として渡すと全て文字列になります。
例えば数値を数値として渡したい場合は、v-bindしてバインドします。
<button-one title="プロップス！" :count="12"></button-one>