在我们的日常开发中,时常需要写一些自定义组件,而其中可能就会使用到v-model,v-model是Vue中的一个指令,用来实现数据的双向绑定,实现数据、视图更新,v-model是一个语法糖,,我们可以自定义v-model指令的部分内容。
vue2中自定义v-model
在vue2中想要自定义v-model,我们需要在组件中设定model变量
export default {
name:'SlideOption',
model:{ // 激活的下标值
prop:'activeIndex',
event:'update'
},
props: {
slides: {
type: Array,
default() {
return ['广场','我的圈子','话题']
}
},
activeIndex:{ // 用来获取当前活跃的按钮下标值
type:[String,Number],
default:0
}
},
methods: {
changeIndex(index){
this.$emit('update',index) // 通过该事件更新绑定的值
}
}
}
然后父组件引入该子组件后,v-model绑定对应的变量即可,子组件中触发changeIndex事件即可使这个绑定的值slideIndex发生变化
<SlideOption v-model="slideIndex"></SlideOption>
vue3中自定义v-model
在vue3中想要自定义v-model,我们不在需要在组件中设定model变量了
export default {
name:'SlideOption',
props: {
slides: {
type: Array,
default() {
return []
}
},
activeIndex:{ // 用来获取当前活跃的按钮下标值
type:[String,Number],
default:0
}
},
setup(context) {
const changeIndex = (index) => {
context.emit("update:activeIndex", index);
}
const changeSlides = (info) => {
context.emit("update:slides", info);
}
return {
changeIndex,
changeSlides
}
}
}
父组件中引入子组件,绑定值
<SlideOption v-model:activeIndex="slideIndex" v-model:slides="slideInfo"></SlideOption>
vue2、vue3中自定义v-model的使用区别
vue2中只允许在组件上使用一个 model,vue3中双向数据绑定的 API 标准化,组件上允许使用多个model。