一、vue2 中 sync 修饰符的功能在 vue3 中如何呈现？
1、sync 修饰符回顾
1、vue 规则：props 是单向向下绑定的，子组件不能修改 props 接收过来的外部数据。
2、如果在子组件中修改 props ，Vue会向你发出一个警告。（无法通过修改子组件的props来更改父组件。）而若需要在子组件更新数据时通知父组件同步更新，需要结合 $emit 和 v-on 实现。
3、而sync修饰符的作用则是简化事件声明及监听的写法。
如下例子，比较sync和正常修改数据通知外层的写法：可以看到 sync 修饰符确实简便了许多。
// 父组件
<template>
<div> 数量： {{num}}</div>
<!-- <ChildComponent :num="num" @increase="num = $event"/> -->
<ChildComponent :num.sync="num" />
</template>
//子组件
<template>
<div @click="addNum"> 接收数量： {{num}}</div>
</template>
<script> export default { props: ['num'], // data() { // return { // childNum: this.num // } // },
methods: { addNum() { // this. childNum++ // this.$emit('increase', this. childNum)
this.$emit('update:num', this.num + 1) } } }
2、sync 的语法糖功能在vue3中如何编写使用？
vue3 中，通过 v-model:propName 实现自定义组件间数据的双向绑定。使用方法：
（1）父组件通过 “v-model:绑定的属性名” 传递数据属性，支持绑定多个属性；
（2）子组件配置emits，通过 “update:属性名” 的格式定义更新事件
二、如何通过v-model实现父子组件的双向数据绑定
Vue3父子组件双向数据绑定写法做了些许改变，同时也支持多个数据双向绑定
1、单个数据双向绑定
// 父组件 // v-model 没有指定参数名时，子组件默认参数名是modelValue
<ChildComp v-model="search" />
需要注意的是：
（1）子组件也并不是直接拿 props 传的变量直接用，而是需要声明一个响应式变量 - 通过 ref(props.modelValue) 声明基于 props 传的变量值为初始化值的响应式数据。
（2）且如果父组件传的是异步数据的话，还需要对其进行监听。
（3）当子组件数据改变时需要通过 emit('update:modelValue', e) 去修改父组件数据实现双向绑定。
<template>
<div>
<input v-model="sea" @input="valChange(sea)" />
</div>
</template>
<script lang="ts"> import { defineComponent, ref, watch } from 'vue' export default defineComponent({ name: 'ChildComp', props: { modelValue: { // 父组件 v-model 没有指定参数名，则默认是 modelValue
type: String, default: '' } }, setup (props, { emit }) { // input初始化
const sea = ref(props.modelValue) // 如果父组件传过来的数据是异步获取的，则需要进行监听
watch(() => props.modelValue, () => { sea.value = props.modelValue }) // 数据双向绑定
function valChange (e: string) { emit('update:modelValue', e) } return { sea, valChange } } }) </script>
2、多个数据双向绑定 - 与单数据绑定差别不大
// 父组件
<ChildComp v-model="search" v-model:address="addr" />
// 子组件对应为
props: { modelValue: { // 父组件 v-model 没有指定参数名，则默认是 modelValue
type: String, default: '' }, address: { // 父组件 v-model 有指定参数名，则是指定参数名
type: String, default: '' } },
// input初始化
const sea = ref(props.modelValue) const add = ref(props.address) // 如果父组件传过来的数据是异步获取的，需要进行监听
watch(() => props.modelValue, () => { sea.value = props.modelValue }) watch(() => props.address, () => { add.value = props.address }) // 数据双向绑定 emit('update:modelValue', e) emit('update:address', e)
3、利用 computed 简化父子组件双向数据绑定
上面是通过 ref 声明响应式数据，其实可以通过 computed 计算属性的 get / set 去简化操作。如下：
const props = defineProps({ modelValue: { type: Boolean, default: false } }) const emit = defineEmits(['update:modelValue']) const show = computed({ get() { return props.modelValue }, set(v) { emit('update:modelValue', v) } })