vue3.x自定义组件双向数据绑定v-model

提示：扫一扫查出行
【扫一扫了解最新限行尾号】
复制提示

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.vueexport 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。