vue3 新特性--v-model

• 非兼容变更：用于自定义组件时，v-model 的 prop 和事件默认名称已更改
  • prop: value -> modelValue
  • 事件: input -> update:modelValue
• 非兼容变更：v-bind 的 .sync 修饰符和组件的 model 选项已移除，可在 v-model 上加一个参数代替
• 新增：可以在同一组件上使用多个 v-model 绑定
• 新增：可以自定义 v-model 修饰符

3.1 vue2 语法

vue2 中，在组件上使用 v-model 相当于绑定 value prop 并触发 input 事件

<ChildComponent v-model="pageTitle" />
<!-- 等价于 -->
<ChildComponent :value="pageTitle" @input="pageTitle = $event" />

3.1.1 model 选项配置修改双向绑定

如果想要更改 prop 或事件名称，则需要在 ChildComponent 组件中添加 model 选项

<!-- ParentComponent.vue -->
<ChildComponent v-model="pageTitle" />
<!-- 等价于 -->
<ChildComponent :title="pageTitle" @change="pageTitle = $event" />

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

3.1.2 v-bind.sync 修改双向绑定（vue3 中已移除）

在某些情况下，我们可能需要对某一个 prop 进行“双向绑定”，可以在子组件中抛出 update:myPropName 事件，父组件使用 :myPropName.sync 实现对 myPropName 属性的双向绑定

// ChildComponent.vue
this.$emit('update:title', newValue)

<!-- ParentComponent.vue -->
<ChildComponent :title="pageTitle" @update:title="pageTitle = $event" />
<!-- 等价于 -->
<ChildComponent :title.sync="pageTitle" />

3.2 vue3 语法

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

<ChildComponent v-model="pageTitle" />
<!-- 等价于 -->
<ChildComponent :modelValue="pageTitle" @update:modelValue="pageTitle = $event"/>

如果需要更改 model 名称，可以为 v-model 传递一个参数，作为组件内的 model 选项代替

<ChildComponent v-model:title="pageTitle" />
<!-- 等价于 -->
<ChildComponent :title="pageTitle" @update:title="pageTitle = $event" />

这也可以作为 .sync 修饰符的替代，而且允许我们在自定义组件上使用多个 v-model

<ChildComponent v-model:title="pageTitle" v-model:content="pageContent" />
<!-- 等价于 -->
<ChildComponent 
    :title="pageTitle" @update:title="pageTitle = $event"
    :content="pageContent" @update:content="pageContent = $event" />