Vue.js 親子コンポーネントにおけるデータのやり取り
投稿日：2017年08月17日
お疲れ様です、ナガです。
コンポーネントの親子間における、データ送受信の流れがいまいち分かっていなかったのでメモです。
子コンポーネント
子コンポーネントに親コンポーネントからデータを受け取るために props を用意します。
コンポーネントで定義するので data は初期データオブジェクトを返す関数として宣言します。
親にデータを渡す関数を発火させるために $emit でカスタムイベントを登録して、引数には親に渡したいデータ childData を渡します。
Vue.component('child-box', {
template: `<div class="box">
<h3>子コンポーネント</h3>
<p>{{ parentData }}</p>
</div>`,
props: ['parentData'],
data: function() {
return {
childData: '子コンポーネントのデータ'
}
},
created: function(){
this.$emit('send-child-data', this.childData);
}
});
2
3
4
5
6
7
8
9
10
11
12
13
14
15
親コンポーネント
親コンポーネントは子コンポーネントに渡すデータと、子コンポーネントから受け取る為に空のデータを用意します。
parentData=> 子コンポーネントに渡すデータchildData=> 子コンポーネントから受け取るデータ
var vm = new Vue({
el: '#main',
data: {
parentData: '親コンポーネントのデータ',
childData: ''
},
methods: {
getChildData: function(text){
this.childData = text;
}
}
});
2
3
4
5
6
7
8
9
10
11
12
テンプレート
子コンポーネント（child-box）にカスタムイベント send-child-data で、親コンポーネントの getChildData を発火させて、子コンポーネントからデータを受け取ります。
この時、子コンポーネントで $emit した send-child-data の引数には、子コンポーネントが持っているデータを渡しているので、発火させる親コンポーネントの getChildData の引数にそれが渡されます。 渡されたデータが親コンポーネントのデータの childData に代入されます。
子コンポーネントで設定した props: ['parentData'] に親コンポーネントのデータをバインドさせる為に、 v-on:parent-data を設定します。
<div id="main">
<div class="box">
<h3>ここは親コンポーネントのスコープ</h3>
<p>{{ childData }}</p>
<child-box
:parent-data="parentData"
@send-child-data="getChildData"></child-box>
</div>
</div>
2
3
4
5
6
7
8
9
まとめ
props=> 子コンポーネントが、親コンポーネントからデータを取得するための配列$emit=> カスタムイベントを登録。第一引数にはイベント名、第二引数以降は渡したいデータ。vm.$emit('event-name', data..)
親コンポーネントでカスタムイベントに登録したい関数を
methods内に作成する。子コンポーネントに親のデータをバインドさせる
:props-name="parentData"orv-bind:props-name="parentData"子コンポーネントにカスタムイベントを設定。
@child-custom-event="parentMethodName"で親の関数を発火できる。htmlの属性はケバブケースで記載する。値はキャメルでも可。