定義在項目的基礎組類別的 tab組件中，定義一個tab切換數量的數組 和一個currentIndex 當前高亮索引 的props，當前高亮（active）的類等於currentIndex === index 當前循環的索引值，增加點擊派發事件傳入index 索引參數，

調用組件的頁面接受派發事件點擊的index 索引，底下的內容根據this.currentIndex 的值v-if 顯示隱藏

tab組件

<template>
  <ul class="switches">
    <li class="switch-item" v-for="(item,index) in switches" :class="{‘active‘:currentIndex === index}"
        @click
 
="switchItem(index)">
      <span>{{item.name}} </span>
    </li>
  </ul>
</template>

<script type="text/ecmascript-6">
  export default {
    props: {
      switches: {
        type: Array,
        default: []
      },
      currentIndex: {
        type: Number,
        
 
default: 0
      }
    },
    methods: {
      switchItem(index) {
        this.$emit(‘switch‘, index)
      }
    }
  }
</script>

調用

<switches :switches="switches" :currentIndex="currentIndex" @switch="switchItem"></switches>

data() {
  return {
    currentIndex: 0,
    switches: [
      {
        name: ‘最近播放‘
      },
      {
        name: ‘搜索歷史‘
      }
    ]
  }
},

switchItem(index) {
  this.currentIndex = index
},
 

vue-music 關於基礎組件 （Tab組件）