vue3中使用sync实现双向数据绑定

vue3中sync的使用与vue2不同

回顾vue2使用sync修饰符：

1、vue 规则：props 是单向向下绑定的，子组件不能修改 props 接收过来的外部数据。

2、如果在子组件中修改 props ，Vue会向你发出一个警告。（无法通过修改子组件的props来更改父组件。）而若需要在子组件更新数据时通知父组件同步更新，需要结合 $emit 和 v-on 实现。

3、而sync修饰符的作用则是简化事件声明及监听的写法。

<template>
    <div> {{num}}</div>
    <ChildComponent :num.sync="num" />
</template>

//子组件
<template>
    <div @click="addNum"> 接收数量： {{num}}</div>
</template>
<script>
export default {
    props: ['num'],
    methods: {
        addNum() {
            this.$emit('update:num', this.num ++)
        }
    }
}

在vue3中使用sync修饰符：具体可参考浅析Vue3中如何通过v-model实现父子组件的双向数据绑定及利用computed简化父子组件双向绑定 - 古兰精 - 博客园 (cnblogs.com)

父组件

子组件