Vue中组件嵌套引用

需求

工作中难免会遇到需要在父组件中使用子组件，子组件中又需要引用父组件的情况，简称“套娃引用”。一般出现场景有Menu、Nav组件。小乌龟在最近工作中遇到一种情况，组件A有个子组件B，组件B回去判断当前应用依赖的应用是否已经部署，如果未部署，再打开一个组件A先部署依赖应用（套娃地狱）。

问题

功能逻辑都不复杂，但是当在组件B中引用组件A时，会报组件未定义或应用错误。反复检查拼写、路径是否错误，结果都没问题。想到了应该是组件嵌套引用的问题，导致Vue运行时不是知道先加载那个组件。由于import是依赖导入，组件A的运行依赖组件B，组件B的运行又依赖组件A，导致运行失败。

解决

父子组件，都使用异步导入

// child.vue
components: {
  'father': () => import('./father'),
}
// father.vue
components: {
  'child': () => import('./child'),
}

也可以使用

// child.vue
components: {
  'father': (resolve) => require(['./father'], resolve),
}
// father.vue
components: {
  'child': (resolve) => require(['./child'], resolve),
}