Vue3 父传子props双向数据绑定 defineProps 和 defineModel
介绍
传递不修改：defineProps （只读）
传递并修改：defineModel （Vue>3.4）
可以根据自己的需求去选择
文档：https://cn.vuejs.org/api/sfc-script-setup.html#definemodel
defineModel使用例子
// 声明 "modelValue" prop，由父组件通过 v-model 使用
const model = defineModel()// 或者：声明带选项的 "modelValue" prop
const model = defineModel({ type: String })// 在被修改时，触发 "update:modelValue" 事件
model.value = "hello"// 声明 "count" prop，由父组件通过 v-model:count 使用
const count = defineModel("count")// 或者：声明带选项的 "count" prop
const count = defineModel("count", { type: Number, default: 0 })function inc() {// 在被修改时，触发 "update:count" 事件count.value++
}
只读不修改defineProps
子组件
<p>{{open}}</p>import {defineProps } from "vue";
defineProps({open: {type: Boolean,},})
父组件
<SelectDialog :open="open" ></SelectDialog>
读取并修改defineModel
子组件
import {defineModel} from "vue";let open = defineModel({type:Boolean,default:true})function close(){open=false
}
父组件
父组件使用 v-model:open=“open” 声明
<SelectDialog v-model:open="open"></SelectDialog>