vue3 使用defineAsyncComponent與component標簽實現動態渲染組件思路詳解

Posted on by

內容有些囉嗦，內容記載瞭當時遇到瞭bug以及解決問題的思路。

業務場景簡述：

前端做配置化組件，通過url內的唯一標識，請求後端sql 哪取頁面配置信息，前端通過配置信息動態渲染查詢表單，導出、表格，toolbar以及動態彈窗；該動態渲染組件的功能，就是渲染的toolbar內的按鈕，類型為自定義彈窗，彈窗路徑為後端配置數據，前端通過點擊該按鈕，打開指定路徑下的彈窗組件。

之前用的vue2的動態掛載組件，也沒見vue3那麼麻煩，官網上的例子以及網上的所以例子都是前端知道要導哪些組件，然後程序進入就直接導進來瞭，隻是寫瞭邏輯動態切換。我這個不一樣，需要掛載的組件是未知的。所以實現起來有點吃力。

一、基礎的動態引入組件：

簡單的動態引入的意思是，前端知道要引入哪些組件，將多個組件引入到父組件中，但不渲染它，滿足一定條件後，才去在某個位置渲染指定的組件。

<template>
	 <custom-modal ref="custom"></custom-modal>
</template>
<script>
 import {
    reactive,
    ref,
    shallowReactive,
    onActivated,
    defineAsyncComponent,
  } from 'vue';
 const customModal = defineAsyncComponent(() => import('./modal/CustomModal.vue'));
 const custom = ref();
 </script>

以上的例子就是通過vue的defineAsyncComponent實現掛載組件，並賦值給customModal ，模板中可以直接使用<custom-modal>作為標簽使用,也可以將它賦值給component中的is屬性，is屬性執向一個變量，可通過業務邏輯動態，更改該變量的值，就可以實現多個組件進行來回的渲染瞭

<template>
<component :is="componentKey" ref="custom"></component>
</template>
 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

二、復雜的引入：不確定到底引入什麼組件，組件的路徑由後端返回

將以上代碼 添加到項目代碼中，並不能實現，雖然引入不報錯，但是ref一直為undefined，無法調用動態組件內的open函數。
不斷嘗試瞭很多次，得出以下結論

1.起初是在按鈕的click函數內去掛載自定義組件並調用ref函數的，ref為undefined。
嘗試多次不能實現功能（這裡是掛載與調用最合適的位置），
2.接著又在初始化配置數據時（查詢後端sql），axios的then函數內掛載組件，然後點擊按鈕的地方調用ref內的函數，ref依舊為null。
3. 接著在最外層，調用初始化時掛載，也就是生命周期函數體內，測試還是一樣的結果。
4. 接著發現帶有async函數體內掛載組件，也無法完成。
5.單獨寫個函數，不加async，函數內掛載組件，然後再生命周期外調用該函數，按鈕內調用ref內的方法，成功彈窗。這並不是我想要的，因為路徑不是固定的，它要等到後端sql放回結果，才能執行。

總結：上面的多次測試，得出以下結論，都不能讓動態組件ref對象有值
1、不能在組件的事件函數內掛載，

在這裡插入圖片描述

2、不能在axios的then函數體內掛載

在這裡插入圖片描述

3、不能在帶有async聲明的函數體內掛載

在這裡插入圖片描述

4、不能在vue的生命周期內掛載

在這裡插入圖片描述

5、隻能在最外層掛載實現，這時ref才是個對象。

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

有瞭上面的思路，通過反復測試和實現，最終功能實現瞭。

<template>
<component :is="componentKey" ref="custom"></component>
</template>
<script>
 import {
    reactive,
    ref,
    shallowReactive,
    onActivated,
    defineAsyncComponent,
  } from 'vue';
	
	//聲明componentkey,用於告訴component當前掛載什麼組件，components為一個對象，存放多個不確定的自定義組件。
  const componentKey = ref(null);
  const components: any = shallowReactive({});

  // 組件掛載
  const initTableConfig = (gridId, type) => { 
   queryTableConfig({ gridId }).then(({ data }) => {
      if (type === 'main') {
        Object.assign(mainConfig, data);
        tabsKey.value = -1;
      } else {
        tabsDetail.value.push(data);
        tabsKey.value = tabsDetail.value.length - 1;
      }
      // 涉及到自定義組件的部分，這裡需要提前掛載，在用到時不至於ref為null
      XEUtils.objectEach(data.action, (action, key) => {
        if (
          action.modalCfg &&
          action.modalCfg.type === 'CustomModal' &&
          action.modalCfg.src
        ) {
          components[action.actionId] = defineAsyncComponent(
            () => import(`../../../${action.modalCfg.src}`)
          );
          //註意：這裡的路徑後端隻能返回相對路徑，不能使用@/xxx/xxx.vue ,不能使用src/xxx/xxx.vue，隻能./xxx.vue或者../../xxx/xxx.vue。由於並不確定組件在什麼位置，避免容易出錯的原則，我在前端通過../../../的形式將路徑回退到src下，後端隻需要從src下配置路徑即可，不用考慮那麼多瞭。如後端src的值為src/xxx/xxx/xxx.vue 則在前端合成的路徑就為../../../src/xx/xxx/xxx.vue
          componentKey.value = components[action.actionId];
          // 為什麼componentKey.vue在這裡賦值，在後面點擊窗口後又賦值，這裡能不能省略。
		//	答：這裡省略的話，到點擊按鈕觸發時會報錯，第一次點擊會報錯，第二次點擊不會報錯，窗口正常彈出。可能是因為，組件掛載時並沒有引入組件，隻在使用時才引入，如果上面不提前將掛載好的組件引入進來，後面觸發事件觸發時引入在調用ref，執行太快，costom就會報錯，所以才會點兩次才彈窗。
        }
      });
    });
  };
 </script>

按鈕點擊觸發事件，確定彈窗要彈出什麼組件

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

經過以上的方式：在任何地方掛載都不會報錯，完美解決。
註意：掛載與使用ref不能在同一個方法體內，如果可以的話，頁面加載時，執行掛載，需要調用ref時就不會報錯。

到此這篇關於vue3 使用defineAsyncComponent與component標簽實現動態渲染組件的文章就介紹到這瞭,更多相關vue3 動態渲染組件內容請搜索WalkonNet以前的文章或繼續瀏覽下面的相關文章希望大傢以後多多支持WalkonNet！

推薦閱讀：