背景

最近再使用抽屉组件的时候,遇到一个棘手的问题,就是抽屉是座位详情功能使用的,这就会带来一个问题,可能在“用户详情抽屉”中需要调用“订单详情抽屉”,而“订单详情抽屉”也可能调用“用户详情抽屉”。简单来说过就是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防止提前渲染
Logo

前往低代码交流专区

更多推荐