Vueは、ひとつのインスタンスにつき、ひとつのテンプレートにしか適用されない仕様です。
インスタンスを再利用するときは、コンポーネントを使用します。
コンポーネント登録の方法
グローバル登録とローカル登録があります。
グローバル登録
グローバル登録は、全てのルートVueインスタンスのテンプレート内で使用ができます。
Vue.component()で呼び出し、第1引数にコンポーネント名、第2引数にオブジェクトを入れる。
第１引数のコンポーネント名には、HTMLタグとの衝突を避けるため、命名ルールに従う。
Vue.component('第1引数 コンポーネント名', {第2引数 オブジェクト})
componentでdataを用いる際は、関数(function)を使わなければならない。returnで値を返す。
＜dataがなぜ関数にする必要があるかのメモ＞
オブジェクトにした場合、ひとつのメモリを参照してしまうため、他のコンポーネントにも影響を及ぼす。
関数を使う事で、それぞれのコンポーネントのメモリーを別々に置き、他のコンポーネントへの影響を防ぐ。
Vue.component('component-1', {
data:function(){
return {
number:100
}
},
template: '<p>{{number}}</p>'
})
テンプレート（HTML）上には、コンポーネント名 <component-1></component-1> を使って表示させる。
<div id="app">
<component-1></component-1>
<component-1></component-1>
<component-1></component-1>
<component-1></component-1>
</div>
ローカル登録
特定のVueインスタンスのみにコンポーネント使う場合、ローカル登録を用いる。
コンポーネントを変数に格納する。
var component = {
data: function () {
return {
number: 0
}
},
template: '<p>{{number}}<button @click="count">up</button></p>',
methods: {
count: function () {
this.number += 1;
}
}
}
変数に格納したコンポーネントを使いたいインスタンス上で呼び出す。
new Vue({
el: '#app2',
components: {
'component-1': component
}
})
components のオブジェクト内は、下記のように定義する。
‘コンポーネント名’:呼び出したいコンポーネント名
‘component-1’: component
単一ファイルコンポーネント
テンプレート（HTML）、CSS、Vueをひとつのパーツにまとめ、.vueというファイルで扱う方法。
Count.vueファイルの作成。
<template>
<div>
<p>ただいまのカウント：({{number}})</p>
<button @click="count">カウンター</button>
</div>
</template>
<script>
export default {
data() {
return {
number: 0
};
},
methods:{
count(){
this.number += 1;
}
}
};
</script>
main.js上で先ほど作成したCount.vueファイルをimportをする。
import Count from './Count.vue'
同じくmain.jsでコンポーネントをグローバル登録する。
Vue.component('Count',Count);
App.vue上で、コンポーネントを呼び出し。
<template> <Count></Count> </template>
単一ファイルコンポーネントをローカル登録する
main.jsでimportしなくともApp.vueで使用できるようにする。
今回は、「CountHeader.vue」ファイルを作成済み。
App.vue上でimportをする。
<template>
<div>
<CountHeader></CountHeader>
<Count></Count>
</div>
</template>
<script>
import CountHeader from "./CountHeader.vue";
export default {
components: {
CountHeader
}
};
</script>
コンポーネントの命名規則
ケバブケースかパスカルケースにする。
どちらを使用してもいいが、統一した方が良い。
ブラウザーは大文字と小文字の区別がつけられないため、DOMテンプレート(※1)ではケバブケースが推奨される。
※1：htmlに直接書き込む場合。VueCLIを使用している場合は問題なし。
ケバブケース
単語の間に「-」ハイフンを用いる書き方。
count-header
パスカルケース
単語の一文字目を大文字にした書き方。
CouontHeader
コンポーネントにcssを追加する
対象のコンポーネントのみにstyleを適用したい場合、styleタグの中にscopedを追加する。
<style scoped>
div {
background: blue;
}
</style>
scopedを追加する事によって、CSSに属性指定を持たせる事ができる。
