(vue3) componentes dinámicos

Lo que es un componente dinámico es: permitir que varios componentes usen el mismo punto de montaje y cambien dinámicamente, este es un componente dinámico.

Utilice la etiqueta del componente en el punto de montaje y luego utilice v-bind :is="component para cambiar el componente AB.

<template>
    <div style="display: flex;">
       <div @click="switchCom(item,index)" 
            :class="[active == index ? 'active':'']" 
            class="tabs" v-for="(item,index) in data" :key="index">
          <div>{
   
   { item.name }}</div>
       </div>
    </div>
    <!-- 内置组件 -->
    <component :is="comId"></component>
</template>

<script setup lang='ts'>
import { ref, reactive, shallowRef, markRaw } from 'vue'
import AP from '@/components/expame/AP.vue'
import BP from '@/components/expame/BP.vue'
import CP from '@/components/expame/CP.vue'

const comId = shallowRef(AP) // 切换组件
const active = ref(0)  // 点击tab动态样式
const data = reactive([  
   {
      name:'A组件',
      com:markRaw(AP)
   },
   {
      name:'B组件',
      com:markRaw(BP)
   },
   {
      name:'C组件',
      com:markRaw(CP)
   }
])
// 点击事件
const switchCom = (item , index) => {
   comId.value = item.com
   active.value = index
}
</script>

escenas a utilizar

cambio de pestaña  principalmente

Precauciones 

1. En Vue2, se cambia por nombre de componente, en Vue3, la configuración se cambia por instancia de componente

2. Si coloca la instancia del componente en Reactive Vue le aparecerá una advertencia runtime-core.esm-bundler.js:38 [Advertencia de Vue]: Vue recibió un componente que se convirtió en un objeto reactivo. Esto puede generar una sobrecarga de rendimiento innecesaria , y debe evitarse marcando el componente con `markRaw` o usando `shallowRef` en lugar de `ref`. 
Componente que se volvió reactivo: 

Esto se debe a que el reactivo realizará el proxy proxy y nuestro componente proxy es inútil para ahorrar sobrecarga de rendimiento. Se recomienda que usemos superficialRef o superficialRef para omitir el proxy proxy, por lo que se debe
usar superficialRef arriba, y superficialRef envuelve los componentes.