Vue自定义组件 v-model

1.声明组件

<template>
  <div class="tabWrap">
    <div v-for="(item, index) in tabs" :key="index"
         @click="tabChange(index)"
         :class="{active:index == value}">{{item}}
    </div>
  </div>
</template>

<script>
export default {
  name: 'Tab',
  props: {
    value: Number,
    tabs: {
      default: () => []
    }
  },
  methods: {
    tabChange (index) {
      if (this.value !== index) {
        this.$emit('input', index)
        this.$emit('change', index)
      }
    }
  }
}
</script>

2.使用组件

<template>
  <div id="app">
    <Tab v-model="tab" :tabs="tabs" @change="changeTab"></Tab>
    {{tab}}
  </div>
</template>
<script>
import Tab from './study/computed'
export default {
  name: 'App',
  mounted () {
    setTimeout(() => {
      this.tab = 1
    }, 3000)
  },
  data () {
    return {
      tab: 2,
      tabs: [1, 2, 3, 4]
    }
  },
  methods: {
    changeTab (val){
      console.log(val)
    }
  },
  components: {
    Tab
  }
}
</script>