绵阳网站的建设,在线房屋设计免费图,虚拟主机搭建wordpress,怀柔网站建设公司前言 有时候我们需要对一个组件绑定自定义 v-model#xff0c;以更方便地实现双向数据 甚至有时候#xff0c;我们想要实现绑定多个 “v-model”#xff0c;也就是多个“双向绑定”#xff0c;好在 vue 3 已经实现了可使用多个 v-model 例如#xff1a; 自定义表单输入控件…前言 有时候我们需要对一个组件绑定自定义 v-model以更方便地实现双向数据 甚至有时候我们想要实现绑定多个 “v-model”也就是多个“双向绑定”好在 vue 3 已经实现了可使用多个 v-model 例如 自定义表单输入控件 弹窗封装组件控制展示与隐藏 vue2 单个“双向绑定”的实现 其实 v-model 本质就是 value change 的语法糖监听传入内容并触发改变因此只要实现 “监听” “触发” 就可以实现自定义 v-model !-- 父组件 --
templateChild v-modelparentValue /
/template
script
import Child from ./components/child.vue
export default {name: ParentComponent,components: {Child,},data() {return {parentValue: , // 父组件数据}},
}
/script
style scoped langscss/style
!-- 子组件 --
templateinput v-modelgetValue /
/template
script
export default {name: ChildComponent,props: {childValue: String,},model: {prop: childValue, // 指定 v-model 要绑定的参数叫什么名字来自于 props 中定义的参数event: updateValue, // 指定要触发的事件名字将被用于 $emit},computed: {getValue: {// 这里的计算属性使用了 getter、setter可以简化代码// 可参见链接 https://cn.vuejs.org/v2/guide/computed.html#%E8%AE%A1%E7%AE%97%E5%B1%9E%E6%80%A7%E7%9A%84-setterget() {return this.childValue},set(val) {this.$emit(updateValue, val) // 触发},},},
}
/script
style scoped langscss/style 通过这样的方式我们就实现了自定义组件的 v-model重点在于子组件中 model 的声明和 emit 事件 vue3 vue2 中的 v-model 和 .sync 功能重叠容易混淆因此 vue3 做了统一一个组件可以多次使用 v-model 注意 vue3 移除了 model 选项就是上面示例 vue2 中的用法 model: { prop: , // 指定 v-model 要绑定的参数叫什么名字来自于 props 中定义的参数 event: , // 指定要触发的事件名字将被用于 $emit } 单个数据双向绑定 !-- 父组件 --
templateChild v-modelparentValue /
/template
script setup nameParentComponent langts
import Child from ./components/child.vueimport { ref } from vue;const parentValue ref()
/script
style scoped langscss/style
!-- 子组件 --
templateinput v-modelgetValue /
/template
script setup nameChildComponent langts
import { ref, computed, defineEmits, defineProps } from vueconst props defineProps({modelValue: {type: String,default: ,},
})const emit defineEmits([update:modelValue])const getValue computed({get() {return props.modelValue},set(newValue) {emit(update:modelValue, newValue)},
})
/script
style scoped langscss/style vue3 使用特定的 modelValue 避免 value 的占用通过 update:modelValue 实现数据双向绑定 多个数据双向绑定 !-- 父组件 --
templateChild v-model:nameparentName v-model:ageparentAge /
/template
script setup nameParentComponent langts
import Child from ./components/child.vueimport { ref } from vueconst parentName ref()
const parentAge ref()
/script
style scoped langscss/style
!-- 子组件 --
templateinput v-modelgetNameValue /input v-modelgetAgeValue /
/template
script setup nameChildComponent langts
import { ref, computed, defineEmits, defineProps } from vueconst props defineProps({name: {type: String,default: ,},age: {type: String,default: ,},
})const emit defineEmits([update:name,update:age])const getNameValue computed({get() {return props.name},set(newValue) {emit(update:name, newValue)},
})const getAgeValue computed({get() {return props.age},set(newValue) {emit(update:age, newValue)},
})
/script
style scoped langscss/style
