<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>

<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

<template>
<component :is="componentKey" ref="custom"></component>
</template>
<script>
 import {
    reactive,
    ref,
    shallowReactive,
    onActivated,
    defineAsyncComponent,
  } from 'vue';
	
	//聲明componentkey,用于告訴component當(dāng)前掛載什么組件，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在這里賦值，在后面點擊窗口后又賦值，這里能不能省略。
		//	答：這里省略的話，到點擊按鈕觸發(fā)時會報錯，第一次點擊會報錯，第二次點擊不會報錯，窗口正常彈出?？赡苁且驗?，組件掛載時并沒有引入組件，只在使用時才引入，如果上面不提前將掛載好的組件引入進來，后面觸發(fā)事件觸發(fā)時引入在調(diào)用ref，執(zhí)行太快，costom就會報錯，所以才會點兩次才彈窗。
        }
      });
    });
  };
 </script>

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