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>
该专栏为热销专栏榜 第37名
订阅专栏 解锁全文
3977
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
