Vueコンポーネント
Vue.jsでは、名前付きの再利用可能なVueインスタンスとして、Vueコンポーネントという仕組みが用意されており、HTMLの要素やスタイル、状態、挙動などを使いまわせる部品としてまとめて定義できる。Vue.component()という関数が用意されており、第一引数にVueインスタンス内に存在する要素名（=コンポーネント名）を、第二引数にオプションを与える。
コンポーネント名は、kebab caseでもcamel caseでもどちらで命名しても構わないが、DOM内ではkebab caseでしか記述できないことを考慮すると、kebab caseに統一しておくことが望ましい。
<ul id="app">
<list-item></list-item>
<list-item></list-item>
<list-item></list-item>
</ul>
<script>
Vue.component('list-item',{
template: '<li>item</li>'
})
new Vue({
el: '#app'
})
</script>
Vueコンポーネントで指定できるオプションは、以下の通り。
| 名前 | 内容 |
|---|---|
| data | UIの状態とデータ |
| filters | データの整形 |
| methods | イベント時の挙動 |
| computed | データから派生して算出する値 |
| template | コンポーネントのテンプレート |
| props | 親要素から子要素へのデータ受け渡し |
コンポーネントは、グローバルのVue.jsに対して定義するグローバルコンポーネントと、あるVueインスタンスの中のみで使用できるローカルコンポーネントが存在する。ローカルコンポーネントは、対象のVueインスタンス内で定義する。
コンポーネントテンプレート
text/x-template
template内の要素をscriptタグ内で定義する方法
<script type="text/x-template" id="list-item">
<li>item</li>
</script>
renderオプション
コンポーネント内でコードを用いる場合は、renderオプションを使用する。
単一ファイルコンポーネント
.vue拡張子の単一ファイル上でコンポーネントを実装することができる。これらのファイルを利用するときは、Webpackなどによるプリコンパイルが必要となる。また、Vueインスタンス内のcomponentsオプションにて、利用するコンポーネントを指定する必要がある。
下記のように、単一ファイルコンポーネント内でも他のコンポーネントをローカル登録することが可能である。
import ComponentA from './ComponentA'
export default {
components: {
ComponentA
}
}
コンポーネントデータ
コンポーネント内のdataオブジェクトにそのままデータを記載すると、コンポーネントの全てのインスタンスでこれらのデータが共有されてしまう。これを防ぐために、コンポーネントでdataオブジェクトを使用する際には、関数を用いて値を返却する実装とする。
コンポーネント間の通信
Vue.jsでは、各コンポーネント内で独自のスコープを持つので、基本的にはコンポーネントを跨いだデータの受け渡しはできないが、親コンポーネントと子コンポーネントの間では、データの受け渡しが可能である。親から子へはpropsオプションを用いて、子から親にはイベントを用いてデータを受け渡す。
propsオプションは子コンポーネント内に記載し、受け渡されるデータの属性名や型などを指定することができる。親コンポーネントでは、v-bindを用いて受け渡す値を指定する。
| コンポーネント | 値の指定方法 | 値の命名規則 |
|---|---|---|
| 親コンポーネント | v-bind:受け渡す値の名前=’コンポーネント内の値の名称’ | kebab case |
| 子コンポーネント | props: {受け取る値の名前: {}} | camel case |
子コンポーネントから親コンポーネントへの通信は、カスタムイベントを使用する。イベントのリッスンには $on(eventName) を、イベントトリガには、 $emit(eventName) を使用する。