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>