场景:
a组件 引入 b组件
b组件 引入 a组件
a组件
import B from './b'
console.log('A组件,',B)
export default 'A'
b组件
import A from './a'
console.log('B组件,',A)
export default 'B'
输出结果:
B组件,undefined
A组件,B
原因是a模块都还没解析完就进入b模块进行解析了,所以a模块就是undefined
解决方案:
1、在运行时导入
b组件
export default{beforeCreated(){// 因为require是common.js,common.js导入ESmodules要加上defaultthis.$options.components.A = require(./a).default;}
}
2、动态导入
b组件
// 这个也是在运行时
export default{components:{A: () => import('./a')}
}