背景

再很多场景中，我们可能想在子组件中修改父组件的数据，但事实上，vue不推荐我们这么做，因为数据的修改不容易溯源。

Vue2写法

在vue2中，我们使用.sync修饰符+自定义事件'update:xxx'，来使父子组件数据同步。

// 父组件 <template>     <div>         <h2>我是父组件，我有{{ money }}¥</h2>         <hr> 				<!-- 这里使用.sync修饰符，使**子组件pmoney**与**父组件money**同步 -->         <Son :pmoney.sync="money" />     </div> </template>  <script> import Son from "./son.vue"; export default {     components: {         Son,     },     data() {         return {             money: 1000 // 父组件数据         };     }, }; </script> 

// 子组件 <template>     <div>         <h2>我是子组件，我爹有{{ pmoney }}¥</h2> 				<!-- 触发**update:pmoney**这个自定义事件，事件参数就是要更改的值 -->         <button @click="$emit('update:pmoney', pmoney - 100)">用了100￥</button>     </div> </template>  <script> export default {     props: { 				// 定义父组件传进来的数据         pmoney: {             type: Number,             default: 0         },     }, }; </script> 

这里不作过多说明，有需要请自行了解。

Vue3写法

vue3的写法与vue2基本一致。最大的区别就是，使用v-model代替.sync修饰符。

// 父组件 <template>     <div>         <!-- 父组件的数据 -->         <h2>我是父组件，我有{{ money }}￥</h2>         <hr>         <!-- 使用子组件 -->         <!-- 这里v-model的作用相当于vue2的.sync修饰符 -->         <Son v-model:pmoney="money" />         <!-- 也可以绑定多组数据 -->         <!-- <Son v-model:pmoney1="money" v-model:pmoney2="money" /> -->     </div> </template>  <script setup lang="ts"> import { ref } from 'vue';  // 引入子组件 import Son from './son.vue';  // 父组件的数据 const money = ref(1000); </script> 

// 子组件 <template>     <div>         <!-- 使用props中的数据 -->         <h3>我是子组件，我爹有{{ pmoney }}¥</h3>         <!-- 这里通过自定义事件，向父组件传递变更后的值，由父组件监听事件并修改数据 -->         <button @click="emit('update:pmoney', pmoney - 100)">我使用了100￥</button>     </div> </template>  <script setup lang="ts"> // 定义props，接收父组件的数据 defineProps(['pmoney']);  // 定义emits，用于触发父组件的事件 const emit = defineEmits(['update:pmoney']); </script> 

原理剖析

下面的v-model:pmoney实际是v-bind:pmoney 属性绑定和@update:pmoney 事件绑定的语法糖。

这里事件绑定的@update:是固定的，这就是子组件的自定义事件要加update: 前缀的原因。

<Son v-model:pmoney="money" /> 

相当于

<Son :pmoney="money" @update:pmoney="money = $event" /> 

• $event：子组件通过自定义事件传给父组件的值。

父子组件数据同步的本质

本质是子组件通过自定义事件向父组件传参数，子组件触发自定义事件并传值，父组件监听自定义事件并取值，同时修改原本的数据，因为v-bind数据绑定，子组件数据也会更新到最新的值。