需求描述
有些时候,我们需要做这样的处理。
点击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>
![](https://img2022.cnblogs.com/blog/1425695/202205/1425695-20220508170841384-124943822.gif)
总结
主要使用的是: <component :is="showCom.com"></component>
中is属性;这个属性对应的是组件的名称。
markRaw表示这个组件不需要响应式