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

本文主要是介绍vue3使用最新的属性defineModel实现父子组件数据响应式绑定，希望对大家解决编程问题提供一定的参考价值，需要的开发者们随着小编来一起学习吧！

子父之间使用v-model双向绑定数据，子组件每次都要写emit和props觉得麻烦？以前，为了使组件支持与v-model双向绑定，它需要（1）声明prop，（2）在打算更新prop时发出相应的update:propName事件：现在再也不用这么麻烦了，直接使用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: 属性名称才可以