前回記事「Vueインスタンスで使うオプションと単一ファイルコンポーネントについて（単一ファイルコンポーネント編） 」では独立したファイルでコンポーネントを作成する方法をまとめてきました。Vue.jsでのプロジェクトにおいて、コンポーネントというのは避けては通れないほど重要なものになります。   今回はそれらコンポーネントにおいて親子関係にあるコンポーネント間でデータを受け渡す方法についてメモしていきたいと思います。ここでは親コンポーネントから子コンポーネントへデータを受け渡す場合になります。  

コンポーネント内で子コンポーネントを呼び出す

まずは親コンポーネントの中に、作成した子コンポーネントを呼び出す必要があります。ここでは親コンポーネントを「ComponentParent.vue」子コンポーネントを「ComponentChildren.vue」としています。まずは親コンポーネントですが、下記のようなコードになります。 【ComponentParent.vue】

<template>
 <div class="parent">
  <p>親コンポーネント</p>
  <component-children />
 </div>
</template>

<script>
 import ComponentChildren from './ComponentChildren.vue'
 export default {
  name: 'ComponentParent',
  components: {
   ComponentChildren
  }
 }
</script>

  テンプレートの部分に見慣れないタグがありますが、これが実際に呼び出すコンポーネントのタグを表しています。タグの名前にはコンポーネントとして命名したものを指定します。次にスクリプトの方では、子コンポーネントをimportし、読み込むコンポーネントとして「components」オプションで呼び出す子コンポーネントを指定します。次に子コンポーネントの中を見ていきます。ここでは普通に呼び出すテンプレートの中身を記しておきます。 【ComponentChildren.vue】

<template>
 <div class="child">
  <p>子コンポーネント</p>
 </div>
</template>

<script>
 export default {
  name: 'ComponentChildren',
 }
</script>

  このように親子関係にあるコンポーネントをコンパイルすると下記のような構成のHTMLが出来上がります。このようにまずは親子関係にあるコンポーネントについて理解しておく必要があります。 【HTML】※一部省略

<div class="parent">
 <p>親コンポーネント</p>
 <div class="child">
  <p>子コンポーネント</p>
 </div>
</div>

  ちなみにですが、Vueの単一コンポーネントファイルの名前はパスカルケースで、テンプレート内でコンポーネントを呼び出すときの名前はスネークケースの命名規則にするのが一般的のようです。各種命名規則についてはこちらの記事「命名規則「キャメルケース」「スネークケース」「ケバブケース」についてまとめてみました」を参考に。  

propsで親コンポーネントから子コンポーネントへデータを渡す

先ほどは親子コンポーネントの作成と呼び出しをしていきましたが、次はいよいよ親子コンポーネント間でデータの受け渡しをおこなっていきます。まずは親コンポーネントから見ていきます。 【ComponentParent.vue】

<template>
 <div class="parent">
  <component-children v-bind:variable="message" />
 </div>
</template>

<script>
 import ComponentChildren from './ComponentChildren.vue'
 export default {
  name: 'ComponentParent',
  components: {
   ComponentChildren
  },
  data: function() {
   return {
    message: 'Hello Vue !!'
   }
  }
 }
</script>

  まずdataオプションにて、受け渡すデータの値を指定しています。今回はこのデータが親コンポーネントから子コンポーネントへ受け渡されるようになります。そしてテンプレート側では受け渡し先の子コンポーネントに、「v-bind」属性を追加し、キーには受け渡し先のコンポーネントで使用するための変数名を、値の方にはdataオプションで扱っている値のキーを指定します。このように親コンポーネントはv-bindにて受け渡すデータの内容をセットします。   次は子コンポーネントです。値を受け取る時には下記のように少しコードを追記する必要があります。まず注目するところはpropsオプションに、親コンポーネントで指定した受け渡しデータの変数名を指定します。テンプレート内で出力する場合には、マスタッシュでこちらの変数名を記述します。 【ComponentChildren.vue】

<template>
 <div class="child">
  <p class="received">{{ variable }}</p>
 </div>
</template>

<script>
 export default {
  name: 'ComponentChildren',
  props: [
   'variable'
  ]
 }
</script>

  上記の内容でこれをビルドすると、子コンポーネントで作成していた部分に親コンポーネントから受け取ったデータが出力されているのが確認できるかと思います。 【HTML】※一部省略

<p class="received">Hello Vue !!</p>

  上記のPropsオプションの指定方法ですが、後述にあるPropsのデータへの型指定のバリデーションがされていない状態になります。この方法でも値の受け渡しは可能ですが、厳密には後述の通り、Propsの値の型指定を行う形を推奨します。  

繰り返し処理の中にある子コンポーネントへデータを渡す

子コンポーネントを動的に出力する際に、繰り返しの処理を行うケースもあるかと思います。そんな時は下記のように親コンポーネントにある子コンポーネントを包括する要素に対して「v-for」というものを使用します。 このv-forの値には配列を直接入力したり、dataオプションにあるデータを指定する形で展開していきます。ここでは複数の値を配列としてdataオプションに指定し、それをv-forで繰り返しています。受け渡しに関しては先ほどと同じくv-bindのキーでは変数名を指定し、値の方には繰り返す配列データのキーを指定します。 【ComponentParent.vue】

<template>
 <div v-for="message in messages" class="parent">
  <component-children v-bind:variable="message" />
 </div>
</template>

<script>
 import ComponentChildren from './ComponentChildren.vue'
 export default {
  name: 'ComponentParent',
  components: {
   ComponentChildren
  },
  data: function() {
   return {
    messages: [ 
     'this is 1st element',
     'this is 2nd element',
     'this is 3rd element'
    ]
   }
  }
 }
</script>

  子コンポーネントは先ほどと変わらず、そのままの内容です。同じように親コンポーネントが受け渡す値をテンプレート内で出力できるようにしています。またスクリプトの方でもpropsオプションで親コンポーネントで設定した変数の値を設置しています。 【ComponentChildren.vue】

<template>
 <div class="child">
  <p class="received">{{ variable }}</p>
 </div>
</template>

<script>
 export default {
  name: 'ComponentChildren',
  props: 'variable'
 }
</script>

  これをビルドすると配列データの数だけ要素が繰り返されて、下記のように親コンポーネントから受け取ったそれぞれのデータの値が出力されるようになります。 【HTML】※一部省略

<p class="received">this is 1st element</p>
<p class="received">this is 2nd element</p>
<p class="received">this is 3rd element</p>

   

Propsの型指定を使ったバリデーション

Lint設定によっては、Propsの値を受け渡しする際に、値の型に合わせた指定をしないとWarningとして警告が表示されます。またこのような型指定をすることで、値のバリデーションを行うことができます。出来るだけこの形に合わせておいたほうがいいかもしれませんね。先ほどの例であれば、Propsで文字列の値を受け渡していますので、下記のような形になります。 【ComponentChildren.vue】

<template>
 <div class="child">
  <p class="received">{{ variable }}</p>
 </div>
</template>

<script>
 export default {
  name: 'ComponentChildren',
  props: {
   'variable': {
    type: String,
    default: '',
    required: false
   }
  }
 }
</script>

  バリデーションの記述は、typeのキーで許容するデータ型を、defaultのキーでその初期値を指定します。また、requiredのキーでは必須かどうかを指定できます。データ型の指定は下記のような形で記述できます。

// 数値型
props: {
 'PROPS_NAME': {
  type: Number,
  default: 0
 }
}

// Boolean型
props: {
 'PROPS_NAME': {
  type: Boolean,
  default: true
 }
}

// 配列型
props: {
 'PROPS_NAME': {
  type: Array,
  default: () => []
 }
}

// オブジェクト型
props: {
 'PROPS_NAME': {
  type: Object,
  default: () => {}
 }
}

  defaultのキーで初期値を指定する場合に、配列型とオブジェクト型については関数の返り値で返すようにする必要がありますので注意が必要です。  

Propsの命名ルールについて

Props名を設定するときには受け渡す側（HTMLのテンプレート内）での記述と、受け取る側（script内での指定）で命名規則が異なります。 【ComponentParent.vue】※一部抜粋

<template>
 ......
 <component-children :variable-text="message"></component-children>
 ......
</template>

  【ComponentChildren.vue】※一部抜粋

<script>
 export default {
  ......
  props: [
   'variableText'
  ]
  ......
 }
</script>

  具体的には上記のようになり、受け渡す際のHTML上に記述する場合にはハイフン区切りの「ケバブケース」で、受け取る側のscript内で記述する場合には「キャメルケース」にする必要があるので注意が必要です。  

---

  いかがでしょうか、Vue.jsでのフロントエンドの構築では、コンポーネントの細分化はもちろんのこと、コンポーネント間でデータの受け渡しも特に重要なものになります。基本となるのでしっかり覚えておきたいと思います。