【Vue3动态组件使用】

重点在于 使用内置组件 component

• 要渲染的实际组件由 is 决定。 当 is 是字符串，它既可以是 HTML

• 标签名也可以是组件的注册名。

• 或者，is也可以直接绑定到组件的定义。

  例如 ：

<template>
    <div>
        <div v-for=" (item,index) in tabList" :key="item.id" @click="getChange(index)">{{item.name}}</div>
    </div>
    <component :is="isComponent.com"></component>
</template>

<script setup>
import A from "@/components/index/A.vue"
import B from "@/components/index/B.vue"
import C from "@/components/index/C.vue"
const tabList = reactive([
    {id:1,name:"组件A",com:markRaw(A)},
    {id:2,name:"组件B",com:markRaw(B)},
    {id:3,name:"组件C",com:markRaw(C)}
])
const isComponent = reactive({
    com:tabList[0].com
})
const getChange = (index) =>{
    isComponent.com = tabList[index].com
}
</script>

**注意这里使用的是reactive 不是 ref **