vue2、vue3中自定义v-model的使用和区别

在我们的日常开发中，时常需要写一些自定义组件，而其中可能就会使用到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。