关于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事件名称要统一