vue组件循环引用组件导致的报错问题

问题描述

在开发过程中，遇到一个循环引用组件的问题，导致开发时就会报错。 例如

这种情况是，比如A组件中引用B组件，同时B组件中也引用A组件导致的。 A 组件（这里举例为列表页）

<template>
  <div>
    <div>我是列表页</div>
    <div v-for="item in list" :key="item.id" class="grid" @click="recordItem(item)">
      <div>
        {{ item.id }}
      </div>
      <div>
        {{ item.typeName }}
      </div>
      <div>
        {{ item.name }}
      </div>
    </div>
    <div>详情展示</div>
    <Info v-if="record.id" :id="record.id" :type="record.type"/>
  </div>
</template>

<script>
import Info from './Info.vue'
export default {
  name: "da-a",
  components:{
    Info
  },
  data() {
    return {
      list: [],
      record:{},
    };
  },
  created() {
    const Arr = [];
    for (let i = 1; i <= 10; i++) {
      const type = Math.floor(Math.random() * 2);
      Arr.push({
        id: i,
        type: type,
        typeName: type ? "类型1" : "类型2",
        name: "张三" + i,
      });
    }
    this.list = Arr;
  },
  methods: {
    recordItem(row){
      this.record = row
    }
  },
};
</script>

<style>
.grid {
  display: grid;
  grid-template-columns: repeat(3,1fr);
  grid-gap: 10px;
}
</style>

B组件（这里举例为详情展示）

<template>
  <div>
    我是详情页{{id}}
    <div>
        {{ type ? "类型2":"类型1" }}
    </div>
    <div>
        下面时关联列表
    </div>
    <div>
        <ListA />
    </div>
  </div>
</template>

<script>
import ListA from './ListA.vue';
export default {
    components:{
        ListA:ListA
    },
  name: 'info',
  props:{
    type:{
        type:Number,
        default: 1
    },
    id:{
        required:true
    }
  }
}
</script>

<style>

</style>

这里的需求关系，就是列表页中，列表点击渲染出详情数据； 但是详情数据可能还会关联别的列表数据，并且通过点击关联的列表数据，依旧可以查询详情，并显示出来。

问题分析

这里为什么会报错呢？ webpack解析文件组件时，是按顺序执行。 当解析到 ListA 组件时，遇到了导入语句

import Info from './Info.vue'

这个时候就会再去解析Info组件 解析Info组件时，又遇到了导入语句

import ListA from './ListA.vue';

这个时候因为之前已经在解析ListA 组件了，只是还没有解析完。所以这个时候，ListA是undefined的。

问题解决

如何解决呢？ 那么通过动态导入就可以轻松解决.