vue：自定义组件的v-model使用

一般我们在做自定义组件的时候是使用props和$emit来实现子父组件的数据交互，这样做就需要在父组件里面去定义一个方法来接收子组件的状态改变时触发的事件，使用v-model就不必在父组件里面去监听子组件的方法，父组件可以直接获取到v-model值的改变：

子组件中除了定义props以外，新增一个model选项：

子组件：

<template>
  <div class='filter-menu'>
    <div class="item" v-for="(item, index) in menus" :key="index" @click="changeActive(index)">
    {{item.name}}
    </div>
  </div>
</template>

<script>
export default {
  name: 'filter-menu',
  components: {},
  props: {
    menus: {
      type: Array,
      default: () => {
        return [];
      }
    },
    align: {
      type: String,
      default: 'left'
    },
    showLine: {
      type: Boolean,
      default: true
    },
    active: {
      type: Number,
      default: 0
    }
  },
  model: {
    prop: 'active', // 这里prop的值对应的是上面props选项中的一个字段，这个字段也是父组件v-model的值
    event: 'change' // $emit触发的事件
  },
  data () {
    return {
    };
  },
  mounted () {},
  computed: {},
  created () {},
  methods: {
    changeActive (e) {
      this.$emit('change', e); // 此处的change对应的model选项event值
    }
  }
};
</script>

父组件：
父组件中通过watch可以监听到active的变化

<filter-menu v-model="active" :menus="filterMenus" />