component 动态组件实现 Tab切换

好的，下面是一个简单的实现示例：

1. 首先，在父组件中定义一个变量来存储当前选中的 tab 索引：

data() {
  return {
    activeTab: 0
  }
}

2. 在模板中定义 tab 切换的标签和内容：

<template>
  <div>
    <div class="tab-nav">
      <div
        v-for="(tab, index) in tabs"
        :key="index"
        :class="{ active: activeTab === index }"
        @click="activeTab = index"
      >
        {{ tab.label }}
      </div>
    </div>
    <div class="tab-content">
      <component :is="tabs[activeTab].component"></component>
    </div>
  </div>
</template>

其中，`tabs` 数组保存了每个 tab 对应的标签和组件，`activeTab` 控制当前选中的 tab，`component` 标签使用 `:is` 属性来动态渲染对应的组件。

3. 在父组件中引入需要动态切换的子组件：

import Tab1 from './Tab1.vue'
import Tab2 from './Tab2.vue'
import Tab3 from './Tab3.vue'

export default {
  components: {
    Tab1,
    Tab2,
    Tab3
  },
  data() {
    return {
      activeTab: 0,
      tabs: [
        { label: 'Tab 1', component: Tab1 },
        { label: 'Tab 2', component: Tab2 },
        { label: 'Tab 3', component: Tab3 }
      ]
    }
  }
}

其中，`tabs` 数组中的 `component` 属性分别对应引入的子组件。

这样就可以通过点击 tab 标签切换对应的组件了。