vue2.x 语法
在 2.x 中，在组件上使用 v-model 相当于绑定 value prop 并触发 input 事件：
<ChildComponent v-model="pageTitle" />
<!-- 是以下的简写: -->
<ChildComponent :value="pageTitle" @input="pageTitle = $event" />
子组件内props里面value接收传进来的值，然后使用this.$emit('input', '***')来改变外部对象的值
vue3.x 语法
在 Vue 3 中，双向数据绑定的 API 已经标准化，以减少开发者在使用 v-model 指令时的混淆，并且更加灵活。
Vue 3 中自定义组件上的 v-model 相当于传递了 modelValue prop 并接收抛出的 update:modelValue 事件：
<ChildComponent v-model="pageTitle" />
<!-- 是以下的简写: -->
<ChildComponent :modelValue="pageTitle" @update:modelValue="pageTitle = $event"/>
子组件内props里面modelValue接收传进来的值，然后使用this.$emit('update:modelValue', '***')来改变外部对象的值
子组件部分实现：
// ChildComponent.vue
export default {
props: {
modelValue: String // 以前是`value：String`
},
methods: {
changeModelValue(value) {
this.$emit('update:modelValue', value) // 以前是 `this.$emit('input', title)`
}
}
}
此外：
若需要更改 model 的名称，现在我们可以为 v-model 传递一个参数，以作为组件内 model 选项的替代：
<ChildComponent v-model:title="pageTitle" />
<!-- 是以下的简写: -->
<ChildComponent :title="pageTitle" @update:title="pageTitle = $event" />
这样我们可以很方便的定义多个双休绑定，并且在高阶封装的时候能更好的使用$attrs来向下传递各种不同的v-model。
