需求描述
有些时候,我们需要做这样的处理。
点击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表示这个组件不需要响应式
遇见问题,这是你成长的机会,如果你能够解决,这就是收获。
作者:晚来南风晚相识
如果文中有什么错误,欢迎指出。以免更多的人被误导。