背景

最近再使用抽屉组件的时候，遇到一个棘手的问题，就是抽屉是座位详情功能使用的，这就会带来一个问题，可能在“用户详情抽屉”中需要调用“订单详情抽屉”，而“订单详情抽屉”也可能调用“用户详情抽屉”。简单来说过就是A组件调用B组件，B组件又调用A组件。

问题描述

现象一：
Failed to reload /src/views/wireless/resource/components/xxxx/xxxx.vue. This could be due to syntax errors or importing non-existent modules. (see errors above)

现象二：
[Vue warn]: Unknown custom element:XXXX - did you register the component correctly? For recursive components, make sure to provide the “name” option

以上两种情况都属于这一类问题，可以尝试一下本方法

解决方案

把其中一个组件设置为动态引入即可。例如：A组件通过“import”引入B组件

• 引入：

  components: {
    CompUserDetailDrawer: () => import('@/components/ViewUserManager/CompUserDetailDrawer.vue'),
  },

• 使用

 <comp-user-detail-drawer ref="CompUserDetailDrawer" :baseInfo="baseInfo" v-if="baseInfo"/>

• 注意
  在应用组件的时候一定要加v-if防止提前渲染