Vue.jsの基本（6）親コンポーネントから子コンポーネントへデータを渡す方法

コンポーネントのデータのやりとりについて
1. 簡単なデータの渡し方
2. 複雑なデータの渡し方

コンポーネントのデータのやりとりについて

コンポーネントを作成するときにコンポーネント間のデータをやりとりする方法は重要な概念となります。この仕組みをいい加減にすると混乱の原因となります。そのため、Vue.jsでは親コンポーネントから子コンポーネント間のデータを渡す方法としてpropsを使う方法が用意されています。また、子コンポーネントから親コンポーネントにデータを渡す方法としてはイベントを使用するようになっています。今回は親コンポーネントにdataプロパティを置いて状態を保存して置いて、そのデータを子コンポーネントに渡して使う方法についての解説です。子コンポーネントにデータを渡すには propsオプションを使います。 propsを使ってデータを渡す仕組みは、HTML側で使うコンポーネント名のタグにv-bind属性を使ってデータを渡します。 具体的には、親コンポーネントにはdataオプションを用意してデータを保存しておきます。次に、子コンポーネントにはpropsオプションを定義します。その際にv-bind属性で指定する名前を決めておきます。この時の名前の決め方が重要です。ここでの命名はJavaScriptの規則でハイフンは使えませんので、キャメルケースで名前をつけます。そして今度はその名前をコンポーネント名のタグ内の属性として使用する場合にはケバブケースで記述する必要があります。ここは紛らわしいですから気をつけましょう。また、データ型やデフォルト値などを定義することができます。 propsオプションは子コンポーネントで次のように定義します。

Vue.component(コンポーネント名,{ props:{ 親から受け取る属性名：｛ type:データ型 default:デフォルト値 required:trueかfalse validator:バリデーション用関数 } } }

簡単なデータの渡し方

サンプルはGitHubを参考にしてください。

<div id="app">
<best-food-title></best-food-title>
<best-food-description></best-food-description>
<best-food-item v-bind:food-name='name'></best-food-item>
</div>
<script src="https://cdn.jsdelivr.net/npm/vue@2.5.17/dist/vue.js"></script>
<script src="main.js"></script>

Vue.component('best-food-title', {
  template: '<h1>好きな食べ物</h1>'
})
Vue.component('best-food-description', {
  template: '<p>DogRoboの好きな食べ物の紹介です。</p>'
})
Vue.component('best-food-item', {
  props:{
    foodName:{
	type:String,
	required:true
	}
    },
  template:'<p>{{ foodName }}</p>'
})
var app = new Vue({
  el:'#app',
  data: {
    name: 'ロボット用赤まむしドリンク'
  }
})

複雑なデータの渡し方

サンプルはGitHubにありますので参考にしてください。

<div id="app">
<best-food-title></best-food-title>
<best-food-description></best-food-description>
<ul>
<best-food-item v-for="food in foods" :key="foods.name" :food-name="food">
</best-food-item>
</ul>
</div>
<script src="https://cdn.jsdelivr.net/npm/vue@2.5.17/dist/vue.js"></script>
<script src="main.js"></script>

Vue.component('best-food-title', {
  template: '<h1>好きな食べ物</h1>'
})
Vue.component('best-food-description', {
  template: '<p>DogRoboの好きな食べ物の紹介です。</p>'
})
Vue.component('best-food-item', {
  props:{
    foodName: {
	type:Object,
	required:true
    }
  },
  template: '<li>{{ foodName.name }}</li>'
})
var app = new Vue({
  el:'#app',
  data:{
    foods: [{
	name: 'ロボット用赤まむしドリンク'
	}, {
	name: 'ロボット用緑色のニッキ玉'
	}, {
	name: 'ロボット用六法焼うぐいすあん'
	}]
    }
})