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

来源：尚车旅游网

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

vue2.x 语法

在 2.x 中，在组件上使⽤ v-model 相当于绑定 value prop 并触发 input 事件：

⼦组件内props⾥⾯value接收传进来的值，然后使⽤this.$emit('input', '***')来改变外部对象的值

vue3.x 语法

在 Vue 3 中，双向数据绑定的 API 已经标准化，以减少开发者在使⽤ v-model 指令时的混淆，并且更加灵活。Vue 3 中⾃定义组件上的 v-model 相当于传递了 modelValue prop 并接收抛出的 update:modelValue 事件：

⼦组件内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 选项的替代：

这样我们可以很⽅便的定义多个双休绑定，并且在⾼阶封装的时候能更好的使⽤$attrs来向下传递各种不同的v-model。

因篇幅问题不能全部显示，请点此查看更多更全内容

查看全文