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。