vue3動(dòng)態(tài)加載組件以及動(dòng)態(tài)引入組件詳解
1.問(wèn)題
在做一個(gè)用vite構(gòu)建的vue3項(xiàng)目時(shí)，動(dòng)態(tài)拉取導(dǎo)入.vue頁(yè)面，然后控制臺(tái)一直有以下提示，頁(yè)面也無(wú)法渲染出來(lái)。
2.分析
根據(jù)上面的報(bào)錯(cuò)提示，讓我們安裝并使用：@rollup/plugin-dynamic-import-vars 這個(gè)插件（最終沒(méi)有這個(gè)方案）。
Vite官方文檔說(shuō)需要使用Glob 導(dǎo)入形式，然后看了一個(gè)Glob的文檔，解決了這個(gè)問(wèn)題（親測(cè)可行）。
首先需要使用特殊的import.meta.glob函數(shù)從文件系統(tǒng)導(dǎo)入多個(gè)模塊：
const modules = import.meta.glob('../views/*/*.vue');
他會(huì)匹配并導(dǎo)入所有相關(guān)的組件：
// vite 生成的代碼
const modules = {
'./views/foo.vue': () => import('./views/foo.vue'),
'./views/bar.vue': () => import('./views/bar.vue')
}
那么回到項(xiàng)目中，在home文件夾下的index.vue文件中導(dǎo)入custom_components文件夾下的所有.vue文件
因此，根據(jù)vite的import.meta.glob函數(shù)：就可以獲得對(duì)應(yīng)的custom_components文件夾下的.vue文件
const changeComponents = (e:string)=>{
const link = modules[`../custom_components/${e}.vue`]
console.log(link,'link')
}
打印link可以看到
最后就是異步注冊(cè)組件
layouts.value = markRaw(defineAsyncComponent(link))
3.最后
下面貼出完整案例，僅供參考。有更好的或者需要優(yōu)化的可以提問(wèn)一起探討。
<template>
<div @click="changeComponents('kk')">顯示kk.vue</div>
<div @click="changeComponents('index')">顯示index.vue</div>
<component :is="layouts"/>
</template>
<script lang='ts' setup>
const modules = import.meta.glob('../custom_components/*.vue');
let layouts = ref<any>(null)
const changeComponents = (e:string)=>{
const link = modules[`../custom_components/${e}.vue`]
layouts.value = markRaw(defineAsyncComponent(link))
}
</script>
總結(jié)
到此這篇關(guān)于vue3動(dòng)態(tài)加載組件以及動(dòng)態(tài)引入組件的文章就介紹到這了,更多相關(guān)vue3動(dòng)態(tài)加載組件內(nèi)容請(qǐng)搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！
相關(guān)文章
這篇文章主要介紹了Vue如何解決兄弟組件之間傳值問(wèn)題，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方，望不吝賜教2022-09-09
這篇文章主要介紹了基于vue hash模式微信分享#號(hào)的解決，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。一起跟隨小編過(guò)來(lái)看看吧2020-09-09
vue forEach循環(huán)數(shù)組拿到自己想要的數(shù)據(jù)方法
今天小編就為大家分享一篇vue forEach循環(huán)數(shù)組拿到自己想要的數(shù)據(jù)方法，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。一起跟隨小編過(guò)來(lái)看看吧2018-09-09
Vue.js是JavaScript MVVM（Model-View-ViewModel）庫(kù)，十分簡(jiǎn)潔，Vue核心只關(guān)注視圖層，相對(duì)AngularJS提供更加簡(jiǎn)潔、易于理解的API。接下來(lái)通過(guò)本文給大家介紹vue的基本用法與常見指令，感興趣的朋友一起看看吧2017-08-08
vue提倡的是在方法中只有對(duì)數(shù)據(jù)的處理，所以提供了事件修飾符用于DOM的事件處理，下面這篇文章主要給大家介紹了關(guān)于Vue自定義組件使用事件修飾符的相關(guān)資料,需要的朋友可以參考下2021-05-05
這篇文章主要介紹了vue中 this.$set的用法詳解，文中通過(guò)示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來(lái)一起學(xué)習(xí)學(xué)習(xí)吧2019-09-09
這篇文章主要介紹了Vue項(xiàng)目搭建過(guò)程，使用NPM方式搭建的，本文分步驟給大家介紹的非常詳細(xì)，具有一定的參考借鑒價(jià)值 ,需要的朋友可以參考下2018-10-10
解決elementui上傳組件el-upload無(wú)法第二次上傳問(wèn)題
這篇文章主要介紹了解決elementui上傳組件el-upload無(wú)法第二次上傳問(wèn)題，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方，望不吝賜教2023-03-03
解決vue-quill-editor上傳內(nèi)容由于圖片是base64的導(dǎo)致字符太長(zhǎng)的問(wèn)題
vue-quill-editor默認(rèn)插入圖片是直接將圖片轉(zhuǎn)為base64再放入內(nèi)容中，如果圖片較多，篇幅太長(zhǎng)，就會(huì)比較煩惱，接下來(lái)通過(guò)本文給大家介紹vue-quill-editor上傳內(nèi)容由于圖片是base64的導(dǎo)致字符太長(zhǎng)的問(wèn)題及解決方法,需要的朋友可以參考下2018-08-08
Element樹形控件el-tree懶加載并設(shè)置默認(rèn)展開和選中的效果
本文主要介紹了Element樹形控件el-tree懶加載并設(shè)置默認(rèn)展開和選中的效果，文中通過(guò)示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來(lái)一起學(xué)習(xí)學(xué)習(xí)吧2023-01-01