1. 问题描述
主要代码如下：
DateTypeFormItem.vue文件
<template>
<ParamsFormModal />
</template>
<script>
import ParamsFormModal from './ParamsFormItem'
export default {
components: {
ParamsFormModal
}
</script>
ParamsFormModal.vue文件
<template>
<DateTypeFormItem />
</template>
<script>
import DateTypeFormItem from './DateTypeFormItem'
export default {
components: {
DateTypeFormItem
}
}
</script>
执行之后，报错如下：
2. 我的思考
碰到这个问题，我第一反应就是觉得是不是哪个单词拼写错了，比如components写成了component，或者是文件路径是不是写错了。但是经过我反复的检查，确定应该没问题的。
后来我去网上找答案，发现大部分也都是一些拼写之类的错误，但是当我看到了这篇文章 www.jianshu.com/p/ae4b392da… ，问题终于解决！
3. 问题解决
修改其中一个文件即可，都修改了好像也没啥问题~
修改DateTypeFormItem.vue文件代码如下
DateTypeFormItem.vue文件（只展示修改部分代码）
<script>
export default {
components: {
ParamsFormModal: () => import('./ParamsFormModal')
}
}
</script>
修改ParamsFormModal.vue文件代码如下
ParamsFormModal.vue文件（只展示修改部分代码）
<script>
export default {
components: {
DateTypeFormItem: () => import('./DateTypeFormItem')
}
}
</script>
4. 总结
这个问题在官方文档中其实也有提到 组件之间的循环引用， 大致意思就是有两个组件，组件A依赖于组件B，组件B也依赖于组件A,当模板系统解析到组件A时，发现A依赖于B，于是去解析B，发现B又依赖于A，这样就会形成一个循环，也就有了这个问题。所以我们需要设置一个点，到底是先解析A还是B，于是我们通过webpack的异步加载的方式，让模板系统知道哪个可以后解析，这样问题就可以解决了。
