はじめに
直近で自作のアプリケーションをVUe2系からVue3系にリライトしたため、その時の操作を備忘録として残します。
今回は親子間の受け渡しの違いについてまとめていきます。
環境
| 項目 | Vue2 | Vue3 |
|---|---|---|
| Vueのバージョン | 2.6.14 | 3.5.13 |
Vue2
①親コンポーネントにsyncした上で、子コンポーネントでemitを発火することで受け渡し可能
②プロパティを更新したい場合はupdate:.syncで指定したプロパティ名を設定
③子から親のファンクションを発火したい場合は、@で指定したメソッドを指定
親
ParentComponent.vue（vue2）
<template>
<div>
<child-component
:update-data.sync="updateData"
@updateProcessing = "updateFunction"/>
<p> {{ updateData }} </p>
<p> {{ emitData }} </p>
</div>
</template>
<script>
import ChildComponent from "ChildComponentまでのパス";
export default {
components: {
ChildComponent
},
data() {
return {
updateData: '親の値',
emitData: ''
}
},
methods: {
updateFunction(argument){
// 子から渡ってきた値を代入
this.emitData = argument
}
}
}
</script>
子
ChildComponent.vue（vue2）
<template>
<div>
<button @click="update"> 親の値が変わるボタン </button>
</div>
</template>
<script>
export default {
data() {
return {
childData: '子の値',
emitChildData: '子から値が渡ってきたよ！'
}
},
methods: {
update(){
// 親のプロパティを更新
this.$emit('update:updateData', this.childData)
// 親のコンポーネントにあるupdateFunctionメソッドを発火
this.$emit('updateProcessing',this.emitChildData)
}
}
}
</script>
押下前
押下後
Vue3
①親コンポーネントに v-modal:プロパティ名 した上で、子コンポーネントでemitを設定することで受け渡し可能（v-modelは複数指定可能）。
②子コンポーネントでemitsの指定が必要
②プロパティを更新したい場合はupdate:v-modelで指定したプロパティ名を設定
③子から親のファンクションを発火したい場合は、@で指定したメソッドを指定
親
ParentComponent.vue（vue3）
<template>
<div>
<child-component
+ v-model:update-data="updateData"
+ v-model:update-data2="updateData2"
@updateProcessing = "updateFunction"/>
<p> {{ updateData }} </p>
<p> {{ updateData2 }} </p>
<p> {{ emitData }} </p>
</div>
</template>
<script>
import ChildComponent from "子コンポーネントまでのパス";
export default {
components: {
ChildComponent
},
data() {
return {
updateData: '親の値',
updateData2: '親の値2',
emitData: ''
}
},
methods: {
updateFunction(argument){
this.emitData = argument
}
}
}
</script>
子
ChildComponent.vue（vue3）
<template>
<div>
<button @click="update">親の値が変わるボタン </button>
</div>
</template>
<script>
export default {
data() {
return {
childData: '子の値',
childData2: '子の値2',
emitChildData: '子から値が渡ってきたよ！'
}
},
+ emits: ['update:updateData', 'update:updateData2', 'updateProcessing'],
methods: {
update(){
// 親のプロパティを更新
this.$emit('update:updateData', this.childData)
this.$emit('update:updateData2', this.childData2)
// 親のコンポーネントにあるupdateFunctionメソッドを発火
this.$emit('updateProcessing',this.emitChildData)
}
}
}
</script>
押下前（vuetifyのデザインテンプレートを使用）
押下後
ちなみにvue2と同じくsyncを使おうとするとbuildの時にエラーが出ます。
また一部emitsにデータを登録し漏れるとconsoleにwarningが出力されます。（下記はupdate:updateDataのみemitsに登録した場合）
さいごに
アップデート時に親子間のデータ受け渡しに苦労したため、まとめてみました。
迷っている方の力になれば幸いです。