【Vue2系・Vue3系】親子間のデータの受け渡しの違い（sync・emit・emits）

## はじめに
直近で自作のアプリケーションをVUe2系からVue3系にリライトしたため、その時の操作を備忘録として残します。
今回は親子間の受け渡しの違いについてまとめていきます。

## 環境
| 項目 | Vue2 | Vue3 |
|:-:|:-:|:-:|
|Vueのバージョン|2.6.14|3.5.13|

## Vue2
①親コンポーネントに**sync**した上で、子コンポーネントでemitを発火することで受け渡し可能
②プロパティを更新したい場合は**update:.sync**で指定したプロパティ名を設定
③子から親のファンクションを発火したい場合は、**@で指定したメソッド**を指定

### 親
```vue: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>
```



### 子
```vue: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>
```

押下前
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3762100/d2fa2aa7-70c2-4a6b-9ac0-6f2aa83b25a5.png)

押下後
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3762100/5b775c8d-7931-4767-af63-11a044d85517.png)

## Vue3
①親コンポーネントに **v-modal:プロパティ名** した上で、子コンポーネントでemitを設定することで受け渡し可能（v-modelは**複数指定可能**）。
②子コンポーネントで**emitsの指定**が必要
②プロパティを更新したい場合は**update:v-modelで指定したプロパティ名**を設定
③子から親のファンクションを発火したい場合は、@で指定したメソッドを指定

### 親
```diff_vue: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>
```



### 子
```diff_vue: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のデザインテンプレートを使用）
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3762100/6f9948b1-77a3-480b-add8-9447096bdd17.png)

押下後
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3762100/fd675de6-1edf-4ba9-8e59-071a4301bf45.png)



ちなみにvue2と同じくsyncを使おうとするとbuildの時にエラーが出ます。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3762100/cdc215c6-9fd0-4423-a10d-9a709121a64e.png)

また一部emitsにデータを登録し漏れるとconsoleにwarningが出力されます。（下記はupdate:updateDataのみemitsに登録した場合）

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3762100/0da3089e-2827-49df-b36f-6edcc86d30b5.png)

## さいごに
アップデート時に親子間のデータ受け渡しに苦労したため、まとめてみました。
迷っている方の力になれば幸いです。