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.x 中，双向数据绑定的 API 已经标准化，以减少开发者在使用 v-model 指令时的混淆，并且更加灵活。
Vue 3.x 中自定义组件上的 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。