vue3动态组件的展示

<template>
  <div>
      <el-button @click="hander(item.com)"
        v-for="item in showCom.list" :key="item.com">
        {{ item.name}}
      </el-button>
     <component :is="showCom.com"></component>
  </div>
</template>
<script setup lang="ts">
import { reactive, ref,markRaw } from "@vue/reactivity"
import TestA from "../components/TestA.vue"
import TestB from "../components/TestB.vue"
import TestC from "../components/TestC.vue"
let showCom=reactive({
  com:TestA,
  list:[
    // markRaw [ma k rou]
    { name:'展示A组件',com: markRaw(TestA)  },
    { name:'展示B组件',com: markRaw(TestB) },
    { name:'展示C组件',com: markRaw(TestC) }
  ]
})
const hander=(comName:any)=>{
  showCom.com=comName
}
</script>