关于vue3:vue2-vue3-学习笔记vue2-vue3-vmodel-语法区别

vue3 对 v -model 的语法进行了改变。
vue2 中有两种形式实现数据的双向绑定（组件与内部数据的双向绑定），一种是应用 v-model，另一种是应用v-bind.sync 修饰符。
两者在应用上没有太大的区别。所以在 vue3 中，舍弃了.sync 的写法，并且将 v -model 的写法向.sync 的写法凑近。

vue2 中的 v -model，次要是进行 value 属性的绑定和 input 事件的派发。如果想要更改 prop 或事件名称，则须要在 ChildComponent 组件中增加 model 选项。

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

vue2 中的.sync，

// 子组件
this.$emit('update:title', newValue)
// 父组件
<ChildComponent :title.sync="pageTitle" />
// 等价于
<ChildComponent :title="pageTitle" @update:title="pageTitle = $event" />

vue3 中的 v -model，

// 子组件
this.$emit('update:modelValue', newValue)
<ChildComponent v-model="pageTitle" />
// 等价于
<ChildComponent :modelValue="pageTitle" @update:modelValue="pageTitle = $event"/>

能够看到 vue3 中的 v -model 和 vue2 中.sync 修饰符的写法简直统一。原来的默认的数据绑定也由 value 改为 modelValue，事件绑定由原来的 input 改为 @update:modelValue。
vue3 中，如果不想应用默认的 model 名称或者想应用多个 v -model，能够进行命名。

// 父组件
<ChildComponent
  :title="pageTitle"
  @update:title="pageTitle = $event"
  :content="pageContent"
  @update:content="pageContent = $event"
/>
// 子组件
this.$emit('update:title', newValue1);
this.$emit('update:content', newValue2);

留神：绑定的 model 名称和 update 事件名称要统一