Vue3 新特性之v-model的一些变化

这是我参与11月更文挑战的第5天，活动详情查看：2021最后一次更文挑战

记录 && 积累! 几篇前文有作 Vue3学习总结的开始:

• Vue3-fragments (新增),
• Vue3-defAsyncComponent 异步组件(新增),
• Vue3-Suspense 处理异步请求,
• Vue3-Teleport 改变组件挂载的根节点,
• Vue3-computed & watch,
• Vue3-生命周期 和 setup()函数,
• Vue3-初体验,

Vue3.x 官方文档 , 本文继续来学习: Vue3 的新特性之 v-model的一些新变化

Vue3 v-model:

在 Vue 3 中，双向数据绑定的 API 已经标准化，以减少开发者在使用 v-model 指令时的混淆，并且更加灵活。

下面列举的一些变化:

新增:

• 现在可以在同一个组件上使用多个 v-model 绑定；
• 现在可以自定义 v-model 修饰符。

非兼容:

• 用于自定义组件时， v-model prop 和事件默认名称已更改：

  • prop： value -> modelValue；
  • 事件：input -> update:modelValue；

• v-bind 的 .sync 修饰符和组件的 model 选项已移除，可在 v-model 上加一个参数代替；

v-model 的使用

在 Vue2.x 中组件上使用 v-model

对于v-model 在组件上使用时, 就相当于绑定一个 value prop 并触发 input 事件

v-model 相当于一个语法糖, 是对绑定值和触发input事件的简写:

// 父组件引用子组件:

<ChildComponent v-model="propValue" />

<!-- v-model 直接绑定值, 是以下的简写: -->

<ChildComponent :value="propValue" @input="propValue = $event" />

// 封装子组件内部处理
// ChildComponent.vue

export default {
  model: {
    prop: 'title',
    event: 'change',
  },
  props: {
    // 这将允许 `value` 属性用于其他用途
    value: String,
    // 使用 `title` 代替 `value` 作为 model 的 prop
    title: {
      type: String,
      default: 'Default title',
    },
  },
}

在 Vue3.x 中组件上使用 v-model 语法

自定义组件上的 v-model 相当于传递了 modelValue prop 并接收抛出的 update:modelValue 事件：

// 父组件引用子组件:
<ChildComponent v-model="propValue" />

<!-- v-model 直接绑定值, 是以下的简写: -->
<!-- 这里需要对事件进行一些处理 -->

<ChildComponent :modelValue="propValue" @update:modelValue="propValue = $event" />