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