やりたいこと
Vue.js (Vue CLI)で、親・子コンポーネント間でデータを受け渡したい。
今回は以下のような流れでデータを受け渡します。
child1.vue(子1) → pearent.vue（親） → child2.vue（子2）
child1.vue(子1) → pearent.vue（親）、子から親へデータを移動
今回は、ボタンを押すとinputに記載された文字列を親コンポーネントに渡す処理を実装します。
まずchild1.vue(子1)
<template>
<div id="target-input">
<p>以下input内に入力されたデータを親に渡します</p>
<input type="text" @input="example = $event.target.value">
<button @click="sendToParent">親へデータを渡す</button>
</div>
</template>
<script>
export default {
data(){
return {
example : "",
}
},
methods: {
sendToParent() {
this.$emit("textForParent",this.example);
}
},
};
</script>
ポイント
・methods内、this.$emitは引数を２つとります。１つ目は好きに名前を付けてください。
（後ほど親コンポーネント内で使用します）
・２つ目は、親コンポーネントへ渡したいデータを指定します。今回はdata内のexampleです。
上記で「送り口」の実装は完成です。
しかしこのままでは「受け取り口」が用意されていない為、データが親コンポーネントへ渡りません。
受け取り側であるpearent.vue（親）に、「受け取り口」を実装していきます。
pearent.vue（親）
<template>
<div id="app">
<child1 v-on:textForParent="text = $event"></child1>
<child2></child2>
</div>
</template>
<script>
import child1 from './child1.vue'
import child2 from './child2.vue'
export default {
name: 'App',
components: {
child1,
child2,
},
data(){
return {
text : "",
}
},
};
</script>
ポイント
・v-onディレクティブの後に、子コンポーネント内で設定したthis.$emitの第１引数をとります。
・$eventには、子コンポーネント内のthis.$emitの第２引数である、データが入ります。
これで、親コンポーネント data内のtextへ、子コンポーネントからデータを渡すことが出来ました。
pearent.vue（親） → child2.vue(子2) 、親から子へデータを移動
では今度は親コンポーネントから子コンポーネントへデータを移動してみましょう。
先ほどのtextを、child2.vueへ渡してみます。
pearent.vue（親）
<template>
<div id="app">
<child1 v-on:textForParent="text = $event"></child1>
<child2 v-bind:textForChild2="text"></child2>
</div>
</template>
<script>
import child1 from './child1.vue'
import child2 from './child2.vue'
export default {
name: 'App',
components: {
child1,
child2,
},
data(){
return {
text : "", //実際には、child1からのデータが入っています
}
},
};
</script>
ポイント
・<child2></child2>にv-bindを付けてあげます。textのデータを子に送ります。
上記で「送り口」はできました。
今度はchild2.vue(子2)に「受け取り口」を作ります。
child2.vue(子2)
<template>
<div>
<p>以下に親コンポーネントから渡されたtextデータを表示します。</p>
<p>{{textForChild2}}</p>
</div>
</template>>
<script>
export default {
props:["textForChild2"],
};
</script>
ポイント
・propsを設定して親コンポーネントからデータを受け取ります。これをtemplate内で呼び出します。
以上です！
今回の例ではchild1.vue(子1)内で作られたデータがpearent.vue（親）へ渡り、そこからchild2.vue(子2)へ渡りました。
子から親へ、親から子へデータを受け渡しすることが出来ました！