vue3 动态组件完成tabs标签页
时间: 2023-09-22 15:12:18 浏览: 115
1. 创建一个Tabs组件,包含多个Tab组件和一个动态组件用于渲染当前选中的Tab内容。
```vue
<template>
<div class="tabs">
<div class="tab-header">
<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>
<script>
export default {
data() {
return {
activeTab: 0,
tabs: [
{
label: 'Tab 1',
component: 'Tab1'
},
{
label: 'Tab 2',
component: 'Tab2'
},
{
label: 'Tab 3',
component: 'Tab3'
}
]
}
}
}
</script>
```
2. 创建多个Tab组件,每个组件都需要提供一个唯一的名称(这里使用了动态组件的名称)。
```vue
<template>
<div>
<h2>Tab 1 Content</h2>
</div>
</template>
<script>
export default {
name: 'Tab1'
}
</script>
```
```vue
<template>
<div>
<h2>Tab 2 Content</h2>
</div>
</template>
<script>
export default {
name: 'Tab2'
}
</script>
```
```vue
<template>
<div>
<h2>Tab 3 Content</h2>
</div>
</template>
<script>
export default {
name: 'Tab3'
}
</script>
```
3. 在父组件中引入所有的Tab组件,并为每个Tab组件设置一个名称。注意,这里只需引入组件,不需要在父组件中显示它们。
```vue
<template>
<div>
<Tabs></Tabs>
<keep-alive>
<component :is="component"></component>
</keep-alive>
</div>
</template>
<script>
import Tabs from './Tabs.vue'
import Tab1 from './Tab1.vue'
import Tab2 from './Tab2.vue'
import Tab3 from './Tab3.vue'
export default {
components: {
Tabs,
Tab1,
Tab2,
Tab3
},
data() {
return {
component: 'Tab1'
}
}
}
</script>
```
4. 将Tabs组件作为父组件的子组件,并在父组件中动态设置当前选中的Tab对应的组件名称。
```vue
<template>
<div>
<Tabs></Tabs>
<keep-alive>
<component :is="component"></component>
</keep-alive>
</div>
</template>
<script>
import Tabs from './Tabs.vue'
import Tab1 from './Tab1.vue'
import Tab2 from './Tab2.vue'
import Tab3 from './Tab3.vue'
export default {
components: {
Tabs,
Tab1,
Tab2,
Tab3
},
data() {
return {
component: 'Tab1'
}
}
}
</script>
```
5. 完成!现在你可以通过点击Tabs组件中的选项卡来切换显示不同的Tab内容。