Vue3 组件 v-model 和 defineModel 使用

v-model 可以在组件上使用以实现双向绑定

简单使用

  Home.vue
  
  

  

  Child.vue
  
  

  

组件 v-model 等同于给子组件传递一个名为 modelValue 的prop；并接受一个名为 update:modelValue 的事件。如：

  Home.vue
  
  

  

多属性双向绑定

当子组件中一个变量需要和父组件做成同步时，此时可以通过 computed 实现

  Home.vue
  
  
  
  

  Child.vue
  
  

  

在子组件中通过 computed 的 get 获取 prop 中的值，通过 set 再触发事件修改值

当 v-model 增加参数时，传递到子组件默认的 modelValue 就会变成 传递的参数，如：address，同时触发事件也会由 update:modelValue 变成 update:address

vueuse 库的 useVModel 内部大体也是这样实现的

defineModel 使用

从 Vue 3.4 开始，推荐的实现方式是使用 defineModel() 宏，这个宏可以用来声明一个双向绑定 prop，通过父组件的 v-model 来使用

defineModel() 返回的值是一个 ref。它可以像其他 ref 一样被访问以及修改，不过它能起到在父组件和当前变量之间的双向绑定的作用

1. 它的 .value 和父组件的 v-model 的值同步；
2. 当它被子组件变更了，会触发父组件绑定的值一起更新。

在底层，这个宏声明了一个 model prop 和一个相应的值更新事件。如果第一个参数是一个字符串字面量，它将被用作 prop 名称；否则，prop 名称将默认为 “modelValue”。在这两种情况下，你都可以再传递一个额外的对象，它可以包含 prop 的选项和 model ref 的值转换选项。

defineModel 底层编译器将其展开为以下内容：

1. 一个名为 modelValue 的 prop，本地 ref 的值与其同步；
2. 一个名为 update:modelValue 的事件，当本地 ref 的值发生变更时触发。

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

在 TypeScript 中使用

defineModel 也可以接收类型参数来指定 model 值和修饰符的类型：

  const modelValue = defineModel()

  // 用带有选项的默认 model，设置 required 去掉了可能的 undefined 值
  const modelValue = defineModel({ required: true })

我们再通过 defineModel 来实现上面的功能

  Home.vue
  
  

  Child.vue
  
  

  

  

如此简单