1.首先以前我們針對父子組件傳參是不是通過defineProps與defineEmits來實現的，但是這么比較繁瑣，因為他是單向傳參，而不是雙向的，這里我們要介紹的是vue3.4的v-model來實現雙向數據傳遞。

2、代碼示例：

//父組件
<template><Add ref="addForm" v-model="drawerStates.add"></Add>
</template>import Add from './add.vue'
const addForm = ref(null)
const drawerStates = reactive({add: false
})//子組件
//父組件使用 v-model="state" 時，這個 state 值會傳遞給 modelValue prop
const props = defineProps({modelValue: Boolean//這是 Vue 3 中 v-model 的默認 prop 名稱
})
// 定義組件可以觸發的事件
// 當子組件觸發這個事件時，父組件的 v-model 值會更新
const emit = defineEmits(['update:modelValue'])
// 創建一個計算屬性 drawerOpen，用于雙向綁定
const drawerOpen = computed({//  從父組件獲取當前值get() {return props.modelValue},// 通知父組件值的變化set(value) {emit('update:modelValue', value)}
})
//這樣在子組件內部可以像使用普通 ref 一樣使用 drawerOpen.value

3、工作流程：

1. 當父組件?drawerStates.add?變化 → 自動更新?props.modelValue

2. 當子組件修改?drawerOpen.value?→ 觸發?update:modelValue?→ 父組件?drawerStates.add更新

4、為什么這么寫？

1. 實現真正的雙向綁定，而不僅僅是單向數據流

2. 保持組件狀態與父組件同步

3. 符合 Vue 3 的組件通信規范

4. 使組件可以像原生表單元素一樣工作