一、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) } })