vue3.0 v-model的使用

一.vue3.0 v-model新特性

官网链接：https://vue3js.cn/docs/zh/guide/migration/v-model.html添加链接描述

官网讲解较为仔细可自行查看官网

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

• prop：value -> modelValue；
• event：input -> update:modelValue；

2.v-bind 的 .sync 修饰符和组件的 model 选项已移除，可用 v-model 作为代替；

3.现在可以在同一个组件上使用多个 v-model 进行双向绑定；

4.现在可以自定义 v-model 修饰符

vue2.0替换为

<ChildComponent :title.sync="pageTitle" />

<!-- 替换为 -->

<ChildComponent v-model:title="pageTitle" />

vue3.0 中.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"
/>