vue3学习动态组件 实现 tab切换

<template>
  <div class="tabs">
    <div
      v-for="tab in tabs"
      :key="tab"
      :class="{ 'active': currentTab === tab }"
      @click="currentTab = tab">
      {{ tab }}
    </div>
  </div>
  <component :is="currentTabComponent"></component>
</template>
 
<script>
import { ref, computed } from 'vue';
import TabContent1 from './TabContent1.vue';
import TabContent2 from './TabContent2.vue';
import TabContent3 from './TabContent3.vue';
 
export default {
  setup() {
    const tabs = ref(['Tab1', 'Tab2', 'Tab3']);
    const currentTab = ref(tabs.value[0]);
 
    const currentTabComponent = computed(() => {
      switch (currentTab.value) {
        case 'Tab1':
          return TabContent1;
        case 'Tab2':
          return TabContent2;
        case 'Tab3':
          return TabContent3;
        default:
          return null;
      }
    });
 
    return {
      tabs,
      currentTab,
      currentTabComponent
    };
  }
};
</script>
 
<style scoped>
.tabs div {
  padding: 10px;
  border: 1px solid #ccc;
  cursor: pointer;
}
 
.tabs div.active {
  background-color: #f0f0f0;
}
</style>

这个代码实例展示了如何在Vue 3中使用动态组件实现Tab切换功能。通过点击不同的标签，来切换显示不同的内容组件。代码中使用了计算属性来动态决定当前激活的标签对应的组件，并通过v-for和v-bind:class来渲染标签列表，以及通过@click事件处理函数来更新当前激活的标签。