1、原理：利用component實(shí)現(xiàn)組件動(dòng)態(tài)渲染，要渲染的實(shí)際組件由 is prop 決定。
- 當(dāng) is 是字符串，它既可以是 HTML 標(biāo)簽名也可以是組件的注冊(cè)名。
- 或者，is 也可以直接綁定到組件的定義。
- 內(nèi)置組件都可以傳遞給 is，但是如果想通過(guò)名稱傳遞則必須先對(duì)其進(jìn)行注冊(cè)。
- 如果將組件本身傳遞給 is 而不是其名稱，則不需要注冊(cè)。
vue官方文檔-component內(nèi)置動(dòng)態(tài)組件
2、代碼具體實(shí)現(xiàn)
思路：在頁(yè)面上注冊(cè)組件，利用component及組件名稱實(shí)現(xiàn)動(dòng)態(tài)渲染。文章來(lái)源地址http://www.zghlxwxcb.cn/news/detail-635819.html
<component :is="dialogComponents.get(componentName)" :key="componentName"></component>
<script lang="ts" setup>
import { ref, defineAsyncComponent } from 'vue'
const componentName = ref('') //保存需要加載的的組件名稱
const dialogComponents = ref(new Map<string, any>())
dialogComponents.value.set(
'OfficialWebsite',
defineAsyncComponent(() => import('./components/OfficialWebsite.vue'))
)
dialogComponents.value.set(
'InterfacePlatform',
defineAsyncComponent(() => import('./components/InterfacePlatform/index.vue'))
)
</script>
文章來(lái)源：http://www.zghlxwxcb.cn/news/detail-635819.html
到了這里，關(guān)于vue3動(dòng)態(tài)加載組件的文章就介紹完了。如果您還想了解更多內(nèi)容，請(qǐng)?jiān)谟疑辖撬阉鱐OY模板網(wǎng)以前的文章或繼續(xù)瀏覽下面的相關(guān)文章，希望大家以后多多支持TOY模板網(wǎng)！
