本篇內(nèi)容介紹了“vue3如何使用defineAsyncComponent與component標(biāo)簽實(shí)現(xiàn)動(dòng)態(tài)渲染組件”的有關(guān)知識(shí)，在實(shí)際案例的操作過程中，不少人都會(huì)遇到這樣的困境，接下來就讓小編帶領(lǐng)大家學(xué)習(xí)一下如何處理這些情況吧！希望大家仔細(xì)閱讀，能夠?qū)W有所成！

桐鄉(xiāng)網(wǎng)站制作公司哪家好，找創(chuàng)新互聯(lián)建站！從網(wǎng)頁設(shè)計(jì)、網(wǎng)站建設(shè)、微信開發(fā)、APP開發(fā)、成都響應(yīng)式網(wǎng)站建設(shè)公司等網(wǎng)站項(xiàng)目制作，到程序開發(fā)，運(yùn)營維護(hù)。創(chuàng)新互聯(lián)建站從2013年開始到現(xiàn)在10年的時(shí)間，我們擁有了豐富的建站經(jīng)驗(yàn)和運(yùn)維經(jīng)驗(yàn)，來保證我們的工作的順利進(jìn)行。專注于網(wǎng)站建設(shè)就選創(chuàng)新互聯(lián)建站。

一、基礎(chǔ)的動(dòng)態(tài)引入組件：

簡單的動(dòng)態(tài)引入的意思是，前端知道要引入哪些組件，將多個(gè)組件引入到父組件中，但不渲染它，滿足一定條件后，才去在某個(gè)位置渲染指定的組件。

以上的例子就是通過vue的defineAsyncComponent實(shí)現(xiàn)掛載組件，并賦值給customModal ，模板中可以直接使用作為標(biāo)簽使用,也可以將它賦值給component中的is屬性，is屬性執(zhí)向一個(gè)變量，可通過業(yè)務(wù)邏輯動(dòng)態(tài)，更改該變量的值，就可以實(shí)現(xiàn)多個(gè)組件進(jìn)行來回的渲染了

 import {
    reactive,
    ref,
    shallowReactive,
    onActivated,
    defineAsyncComponent,
  } from 'vue';
 const componentKey = ref(null);
 const components: any = shallowReactive({});
 const customModal = defineAsyncComponent(() => import('./modal/CustomModal.vue'));
 componentKey  = customModal

二、復(fù)雜的引入：不確定到底引入什么組件，組件的路徑由后端返回

將以上代碼 添加到項(xiàng)目代碼中，并不能實(shí)現(xiàn)，雖然引入不報(bào)錯(cuò)，但是ref一直為undefined，無法調(diào)用動(dòng)態(tài)組件內(nèi)的open函數(shù)。
不斷嘗試了很多次，得出以下結(jié)論

1.起初是在按鈕的click函數(shù)內(nèi)去掛載自定義組件并調(diào)用ref函數(shù)的，ref為undefined。
嘗試多次不能實(shí)現(xiàn)功能（這里是掛載與調(diào)用最合適的位置），
2.接著又在初始化配置數(shù)據(jù)時(shí)（查詢后端sql），axios的then函數(shù)內(nèi)掛載組件，然后點(diǎn)擊按鈕的地方調(diào)用ref內(nèi)的函數(shù)，ref依舊為null。
3. 接著在最外層，調(diào)用初始化時(shí)掛載，也就是生命周期函數(shù)體內(nèi)，測試還是一樣的結(jié)果。
4. 接著發(fā)現(xiàn)帶有async函數(shù)體內(nèi)掛載組件，也無法完成。
5.單獨(dú)寫個(gè)函數(shù)，不加async，函數(shù)內(nèi)掛載組件，然后再生命周期外調(diào)用該函數(shù)，按鈕內(nèi)調(diào)用ref內(nèi)的方法，成功彈窗。這并不是我想要的，因?yàn)槁窂讲皇枪潭ǖ?，它要等到后端sql放回結(jié)果，才能執(zhí)行。

總結(jié)：上面的多次測試，得出以下結(jié)論，都不能讓動(dòng)態(tài)組件ref對(duì)象有值
1、不能在組件的事件函數(shù)內(nèi)掛載，

2、不能在axios的then函數(shù)體內(nèi)掛載

3、不能在帶有async聲明的函數(shù)體內(nèi)掛載

4、不能在vue的生命周期內(nèi)掛載

5、只能在最外層掛載實(shí)現(xiàn)，這時(shí)ref才是個(gè)對(duì)象。

好在天無絕人之路；腦海里有個(gè)思路：
頁面初始化時(shí)將項(xiàng)目里所有的全局掛載view組件扔到一個(gè)object內(nèi)，使用component組件，is：對(duì)應(yīng)object內(nèi)指定的組件對(duì)象，然后通過后端的數(shù)據(jù)，這時(shí)后端就不用給組件路徑了，給個(gè)組件名，我從object中找到掛載的組件然后將對(duì)象給is。
const modules = import.meta.glob('@/views/*/**.vue'); // 獲取所有項(xiàng)目路徑
mudules為views內(nèi)所有的vue的相對(duì)路徑，然后循環(huán)它，在循環(huán)體內(nèi)實(shí)現(xiàn)掛載，將它存入一個(gè)對(duì)象內(nèi)，key為相對(duì)路徑的項(xiàng)目名稱（可以截取以下）。

有了上面的思路，通過反復(fù)測試和實(shí)現(xiàn)，最終功能實(shí)現(xiàn)了。

按鈕點(diǎn)擊觸發(fā)事件，確定彈窗要彈出什么組件

		} else if (action.modalCfg.type === 'CustomModal') {
  		// 這里的actionid和組件是對(duì)應(yīng)的，所以在按鈕觸發(fā)后，通過按鈕攜帶的actionid能取到對(duì)應(yīng)的組件。
          componentKey.value = components[action.actionId];
          custom.value.init(row);
        }

經(jīng)過以上的方式：在任何地方掛載都不會(huì)報(bào)錯(cuò)，完美解決。
注意：掛載與使用ref不能在同一個(gè)方法體內(nèi)，如果可以的話，頁面加載時(shí)，執(zhí)行掛載，需要調(diào)用ref時(shí)就不會(huì)報(bào)錯(cuò)。

“vue3如何使用defineAsyncComponent與component標(biāo)簽實(shí)現(xiàn)動(dòng)態(tài)渲染組件”的內(nèi)容就介紹到這里了，感謝大家的閱讀。如果想了解更多行業(yè)相關(guān)的知識(shí)可以關(guān)注創(chuàng)新互聯(lián)網(wǎng)站，小編將為大家輸出更多高質(zhì)量的實(shí)用文章！