子父之间使用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: 属性名称才可以
<Child v-model:count="headerVisible">