vue3动态组件的展示

需求描述

有些时候，我们需要做这样的处理。
点击A按钮的时候，出现组件A
点击B按钮的时候，出现组件B
点击C按钮的时候，出现组件C
这个时候，我们就可以使用动态组件了

动态组件

<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>

总结

主要使用的是： <component :is="showCom.com"></component>
中is属性；这个属性对应的是组件的名称。
markRaw表示这个组件不需要响应式