使用vue动态组件实现tab标签页效果

<template>
  <div class="tabs">
    <button v-for="tab of tabs" @click="toggleTab(tab)">{{ tab }}</button>
    <component :is="currentTabComponent"></component>
  </div>
</template>

<script>
  import TabsHome from './tabs/tabs-home.vue'
  import TabsNews from './tabs/tabs-news.vue'
  import TabsUser from './tabs/tabs-user.vue'

  export default {
    name: "tabs",
    data() {
      return {
        tabs: ['Home', 'User', 'News'],
        currentTab: 'home'
      }
    },
    computed: {
      currentTabComponent() {
        return 'tabs-' + this.currentTab.toLowerCase();
      }
    },
    components: {
      TabsHome,
      TabsNews,
      TabsUser,
    },
    methods: {
      toggleTab(tab) {
        this.currentTab = tab.toLowerCase()
      }
    }
  }
</script>

本例是在vue-cli脚手架的基础上实现的，主要是写业务逻辑，暂无CSS样式。

步骤： 

   1. 创建tab父组件， 子组件tabs-home, tabs-news, tabs-user

   2. 定义三个组件的标题 和当前显示的组件 currentTab 

data() {
    return {
        tabs: ['home', 'news', 'user'],
        currentTab: 'home'
    }
}

   3.  v-for遍历三个button, 且绑定toggleTab()事件，点击时改变currentTab的值

   4. 显示组件<component :is="currentTabsComponent"></component>

   5. 计算属性 currentTabsComponent, 返回组件名称

   6. 导入子组件