工作276:v-model自定义事件理解

<template>
  <nav class="tab-bar">
    <ul class="tabs">
      <li class="item" :class="{active: tab === tabValue}" v-for="tab of tabList" @click="handleTabClick(tab)">{{tab}}
      </li>
    </ul>
  </nav>
</template>

<script>
  export default {
    props: ['tabValue', 'tabList'],
    data() {
      return {}
    },
    model: {
      prop: 'tabValue',
      event: 'changeTab'
    },
    methods: {
      handleTabClick(tab) {
        this.$emit('changeTab', tab)
      }
    },
    watch: {
      tabValue() {
        console.log(this.tabValue)
      }
    }
  }
</script>

和上面的代码可以对比一下，其实很好理解，就是把父组件默认参数value,替换成tabValue，默认input事件替换成changTab事件。这样做的目的其实主要的是为了让写代码的人更容易理解。