让多个组件使用同一个挂载点，并且能够动态切换。通过 :is=""的切换，实现组件的不同展现：
<component :is="A"></component>
具体实例如下：
<template>
<div class="tabs">
<div class="zujian" :class="active === index? 'active': ''" v-for="(value,index) in res" :key="index" @click="change(value,index)">
{{ value.name }}
</div>
</div>
<component :is="com"></component>
</template>
<script setup >
import { reactive, ref } from 'vue';
import A from './components/A.vue';
import B from './components/B.vue';
import C from './components/C.vue';
import { it } from 'element-plus/es/locales.mjs';
const active = ref(0)
const com =ref(A)
const res = reactive([
{name:'A组件',
zujian:A
},
{
name:'B组件',
zujian:B
},
{
name:"C组件",
zujian:C
}
])
const change = (value,index)=>{
active.value =index
com.value=value.zujian
}
</script>
