Vue.js(2)コンポーネント

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) を使用する。