<!-- currentTab 改變時組件也改變 -->
<component :is="currentTab"></component>

<template>
  <div class="content">
    <div class="tabs" v-for="item in tabArr" :key="item.name" @click="tabChange(item.comName)">
      {{ item.name }}
    </div>
  </div>
  <component :is="currentCom"></component>
</template>
<script setup lang="ts">
  import { ref, reactive, markRaw } from 'vue'
  import A from './A.vue'
  import B from './B.vue'
  import C from './C.vue'
  type Tab = {
    name: string,
    comName: any
  }
  // 從復(fù)雜數(shù)據(jù)類型中取出自己想要的幾個屬性
  type Com = Pick<Tab, 'comName'>
  const tabArr = reactive<Tab[]>([
    {
      name: 'A組件',
      comName: markRaw(A)
    },
    {
      name: 'B組件',
      comName: markRaw(B)
    },
    {
      name: 'C組件',
      comName: markRaw(C)
    },
  ])
  const currentCom = ref<Com>(tabArr[0].comName)
  const tabChange = (item: Com) => {
    currentCom.value = item
  }
</script>
<style>
  .content {
    display: flex;
    padding: 20px;
    height: 40px;
    width: 100vw;
    background: #f1f1f1;
  }
  .tabs {
    width: 100px;
    height: 40px;
    background: #ffffff;
    margin-right: 5px;
    border: 1px solid #000;
  }
</style>