vue3+ts 动态组件的使用

<script setup lang="ts">
import { reactive, ref, markRaw, shallowRef } from "vue";
import AVue from "./components/A.vue";
import BVue from "./components/B.vue";
import CVue from "./components/C.vue";
const comId = shallowRef(AVue);
const active = ref(0);
const data = reactive([
  {
    name: "A组件",
    com: markRaw(AVue),
  },
  {
    name: "B组件",
    com: markRaw(BVue),
  },
  {
    name: "C组件",
    com: markRaw(CVue),
  },
]);

const switchCom = (item: any, index: number) => {
  comId.value = item.com;
  active.value = index;
};
</script>

<template>
  <div>
    <div style="display: flex">
      <div
        @click="switchCom(item, index)"
        :class="[active === index ? 'active' : '']"
        class="tabs"
        v-for="(item, index) in data"
      >
        <div>{{ item.name }}</div>
      </div>
    </div>
    <div>
      <component :is="comId" :title="'322'" :list="[1]"></component>
    </div>
  </div>
</template>

<style scoped>
.tabs {
  border: 1px solid #ccc;
  padding: 5px 10px;
  margin: 5px;
  cursor: pointer;
}
.active {
  background-color: skyblue;
}
</style>