vue3使用最新的属性defineModel实现父子组件数据响应式绑定

有的人说需要单独在vite中配置开启，但是我用的时候就不用配置也可以使用。也许我用的最新版本？大家可以看一下自己的版本是否一致

如果你的版本更高或者 defineModel 没有生效，可以尝试在vite.config.js中开启：

plugins: [vue({script: {defineModel: true,},}),],

使用的时候需要注意，有两种方式，一种是默认绑定一个响应式数据的方式，一种是想绑定多个响应式数据的方式：

绑定一个数据的时候

在子组件里面直接定义：

// 通过父组件绑定一个双向绑定的skill值
const count = defineModel({ type: Number, default: 1 })
// 增加count
const add = () => {count.value < 5 && count.value++
}
// 减少
const sub = () => {count.value > 1 && count.value--
}

在父组件直接使用：v-model绑定值就可以

 <Skill class="skill" v-model="skillCall.protect"></Skill>

绑定多个响应式数据

在子组件里面定义：

// 声明 "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++
}

在父组件里面使用绑定： 要使用 v-model: 属性名称才可以

<Child v-model:count="headerVisible">