需求描述

有些時候，我們需要做這樣的處理。
點選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表示這個元件不需要響應式