vue3动态组件实现tabs标签页

vue3动态组件实现tabs标签页的步骤如下：

1. 创建tabs组件，包含tabs和tab两个子组件。tabs组件负责显示当前选中的tab和切换tab，tab组件则负责显示tab的内容。

2. 在tabs组件中定义一个数组，用于存储所有的tab信息。每个tab信息包括tab的名称和对应的组件。

3. 在tabs组件中使用v-for指令循环渲染所有的tab，同时使用动态组件来渲染对应的组件。

4. 在tab组件中定义一个插槽，用于显示tab的内容。

5. 在tabs组件中定义一个方法，用于切换tab。该方法接受一个index参数，表示要切换到的tab的索引。该方法根据索引更新当前选中的tab，并将对应的组件渲染出来。

6. 在tabs组件中使用v-on指令绑定点击事件，调用切换tab的方法。

7. 在父组件中引入tabs组件，并传入所有的tab信息。

8. 使用tabs组件来显示tab标签页。

示例代码如下：

// Tabs.vue
<template>
<div class="tabs">
<div class="tab-list">
<div
class="tab"
v-for="(tab, index) in tabs"
:key="tab.name"
:class="{ active: isActiveTab(index) }"
@click="selectTab(index)"
>{{ tab.name }}</div>
</div>
<div class="tab-content">
<component :is="tabs[currentTab].component"></component>
</div>
</div>
</template>
<script>
export default {
name: "Tabs",
props: ["tabs"],
data() {
return {
currentTab: 0,
};
},
methods: {
isActiveTab(index) {
return this.currentTab === index;
},
selectTab(index) {
this.currentTab = index;
},
},
};
</script>

// Tab.vue
<template>
<div class="tab-content">
<slot></slot>
</div>
</template>

// App.vue
<template>
<div class="app">
<Tabs :tabs="tabs"></Tabs>
</div>
</template>
<script>
import Tabs from "./Tabs.vue";
import Tab from "./Tab.vue";
import Tab1 from "./Tab1.vue";
import Tab2 from "./Tab2.vue";

export default {
name: "App",
components: {
Tabs,
Tab,
Tab1,
Tab2,
},
data() {
return {
tabs: [
{ name: "Tab 1", component: "Tab1" },
{ name: "Tab 2", component: "Tab2" },
],
};
},
};
</script>