Vue在子组件 在父组件里面Tab切换

切记v-for和v-if 不能一起用  

首先,v-for循环是作用在dom节点上的,如果同时使用的话，编译器会直接报错，告诉你v-if和v-for不能同时使用;

当和 v-for 一起使用时，v-for 的优先级比 v-if 更高

所以我下边换成v-show  可以使用v-show

<template>
  <div>
    <div>
      <button v-for="(tab, index) in tabs" :key="index" :class="{ 'active': index === activeTab }" @click="activeTab = index">
        {{ tab.name }}
      </button>
    </div>
    <div v-for="(tab, index) in tabs" :key="index"  v-show="index === activeTab">
      <component :is="tab.component"></component>
    </div>
  </div>
</template>

<style>
.active{
    border-bottom: 1px solid #ddd;
}
</style>

<script>
//引入子组件
  import ChaoTabChaoTab from '../../components/ChaoTab.vue'  
  import ChaoTabtwo from '../../components/ChaoTabtwo.vue'
  import ChaoTabsan from '../../components/ChaoTabsan.vue'

  export default {
    components: {
      ChaoTabChaoTab,
      ChaoTabtwo,
      ChaoTabsan,
    },
    data() {
      return {
        tabs: [
          { name: 'Tab1', component: ChaoTabChaoTab },
          { name: 'Tab2', component: ChaoTabtwo },
          { name: 'Tab3', component: ChaoTabsan },
        ],
        activeTab: 0,
      }
    },
  }
</script>