介绍

传递不修改：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>