VUE3+Element-Plus项目 Component之间相关引用的问题

在项目中，经常会出现在ComponentA需要显示ComponentB页面，ComponentB也需要显示ComponentA页面，这样的情况在代码本地运行的时候一般没有什么问题也不会影响使用，但是一编译的时候就会出现如下error：

是由于组件之间循环引用报的错

可以采用以下方法来解决问题：

solution：采用异步加载component的方式，在画面初始化加载的时候不引用，因为使用的是VUE3，所以生命周期函数onCreated已经取消了，可以直接在setup中引入其他component。

下面是相关的案例代码：

<template>
  <!-- 打开 ComponentA -->
  <el-dialog
    v-model="payMoneyApprovalFLowDialogModel"
    width="80%"
    destroy-on-close
  >
    <component :is="currentComponentA"></component>
  </el-dialog>
  <!-- 打开 ComponentB -->
  <el-dialog v-model="applyApprovalDialogModel" width="90%" destroy-on-close>
    <component :is="currentComponentB"></component>
  </el-dialog>
</template>
<script lang="ts" setup>
  import { defineAsyncComponent, ref } from "vue";
  let currentComponentA = ref();
  let currentComponentB = ref();
  currentComponentA.value = defineAsyncComponent(
    () =>
      import(
        "@/views/ProjectLogistics/ProjectAdmin/ProjectBatchManagement/batchPerformView/payMoneyApprovalFlow.vue"
      )
  );
  currentComponentB.value = defineAsyncComponent(
    () =>
      import(
        "@/views/ProjectLogistics/ProjectAdmin/ProjectBatchManagement/batchPerformView/makeinvoice/invoiceApplyApprovalPage.vue"
      )
  );
</script>

有任何建议或者问题请评论指出，谢谢！