vue3探索——组件通信之v-model父子组件数据同步

2023-08-27 12:53:27 来源：博客园

(资料图片仅供参考)

背景

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

Vue2写法

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

// 父组件<script>import Son from "./son.vue";export default {    components: {        Son,    },    data() {        return {            money: 1000 // 父组件数据        };    },};</script>

// 子组件<script>export default {    props: {// 定义父组件传进来的数据        pmoney: {            type: Number,            default: 0        },    },};</script>

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

Vue3写法

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

// 父组件<script setup lang="ts">import { ref } from "vue";// 引入子组件import Son from "./son.vue";// 父组件的数据const money = ref(1000);</script>

// 子组件<script setup lang="ts">// 定义props，接收父组件的数据defineProps(["pmoney"]);// 定义emits，用于触发父组件的事件const emit = defineEmits(["update:pmoney"]);</script>

原理剖析

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

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

相当于

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

父子组件数据同步的本质

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

关键词：

vue3探索——组件通信之v-model父子组件数据同步

背景

Vue2写法

我是父组件，我有{{ money }}¥

我是子组件，我爹有{{ pmoney }}¥

Vue3写法

我是父组件，我有{{ money }}￥

我是子组件，我爹有{{ pmoney }}¥

原理剖析

父子组件数据同步的本质