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绑定值就可以

 

绑定多个响应式数据

在子组件里面定义：

// 声明 "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: 属性名称才可以