在现代前端开发中，Vue.js以其简洁而强大的双向数据绑定功能赢得了众多开发者的青睐。其中，v-model作为Vue.js的核心特性之一，更是被广泛运用于各种自定义组件的开发中。本文将带您领略v-model在Vue2和Vue3自定义组件中的独特魅力，并通过生动的实例展示其背后的工作原理。

一、Vue2中的v-model

在Vue2中，v-model的使用相对简单直观。它允许父组件与子组件之间建立双向数据绑定，从而实现数据的自动同步。以多选按钮为例，我们可以通过v-model轻松实现按钮的选择状态。

<!-- 父组件 -->
<template>
  <div>
    <SelectBtn :options="options" v-model="btnSelect" @btnChange="btnChange"></SelectBtn>
    <p>您选择了：{{ btnSelect.length ? btnSelect.join(', ') : '' }}</p>
  </div>
</template>

<script>
import SelectBtn from './child.vue';

export default {
  components: {
    SelectBtn
  },
  data() {
    return {
      options: [
        { label: '一年级一班', value: '1-1' },
        { label: '一年级二班', value: '1-2' },
        // ...
      ],
      btnSelect: []
    };
  },
  methods: {
    btnChange(item) {
      console.log('当前点击的按钮：', item);
      console.log('v-model绑定的btnSelect：', this.btnSelect);
    }
  }
};
</script>

在子组件SelectBtn中，我们通过model选项指定v-model绑定的属性和事件：

export default {
  model: {
    prop: 'btnSelect',
    event: 'updateBtnSelect'
  },
  props: {
    options: Array,
    btnSelect: Array
  },
  methods: {
    handleBtnSelect(item) {
      let selectIndex = this.btnSelect.findIndex(ele => ele === item.value);
      if (selectIndex > -1) {
        this.$emit('updateBtnSelect', [
          ...this.btnSelect.slice(0, selectIndex),
          ...this.btnSelect.slice(selectIndex + 1)
        ]);
      } else {
        this.$emit('updateBtnSelect', [...this.btnSelect, item.value]);
      }
      this.$emit('btnChange', item);
    }
  }
};

二、Vue3中的v-model进化

随着Vue3的发布，v-model得到了进一步的优化和改进。在Vue3中，v-model的使用变得更加灵活，同时也更加符合现代前端开发的最佳实践。

<!-- 父组件 -->
<template>
  <div>
    <SelectBtn :options="options" v-model:btnSelect="btnSelect"></SelectBtn>
    <p>您选择了：{{ btnSelect.length ? btnSelect.join(', ') : '' }}</p>
  </div>
</template>

<script setup>
import { ref } from 'vue';
import SelectBtn from './child.vue';

const options = ref([
  { label: '一年级一班', value: '1-1' },
  { label: '一年级二班', value: '1-2' },
  // ...
]);

const btnSelect = ref([]);
</script>

在Vue3中，我们不再需要手动指定model选项，因为Vue3会自动推断出v-model绑定的属性和事件。同时，子组件中的事件名称也变得更加灵活，可以自定义。

// 子组件
export default {
  props: {
    options: Array,
    btnSelect: Array
  },
  emits: ['update:btnSelect', 'btnChange'],
  setup(props, { emit }) {
    const handleBtnSelect = (item) => {
      let selectIndex = props.btnSelect.findIndex(ele => ele === item.value);
      if (selectIndex > -1) {
        emit('update:btnSelect', [
          ...props.btnSelect.slice(0, selectIndex),
          ...props.btnSelect.slice(selectIndex + 1)
        ]);
      } else {
        emit('update:btnSelect', [...props.btnSelect, item.value]);
      }
      emit('btnChange', item);
    };

    return {
      handleBtnSelect
    };
  }
};

三、总结与展望

从Vue2到Vue3，v-model在自定义组件中的使用经历了一次显著的进化。它不仅变得更加灵活和强大，而且更加符合现代前端开发的最佳实践。通过本文的探讨，相信您已经对v-model在Vue2和Vue3自定义组件中的使用有了更深入的了解。

展望未来，随着Vue.js的不断发展和完善，v-model的功能和应用场景也将进一步拓展。我们期待看到更多创新的v-model使用方式，为前端开发带来更多的便利和可能性。