Vue.js 组件 - 组件间的循环引用

例如：组件A，组件A里有一个子组件C和D，组件C的子组件又引用了组件D，这种情况会报警告

循环调用组件时，组件比vue实例后创建，官方文档里写组件必须先于实例化引入，所以说组件没有正确的引入。

 

Vue.component 全局注册组件时，组件循环引用可以解开。全局引入组件，并且在vue实例化前。

import PosterTemplate from '@/components/SmartPoster/Template'
Vue.component('PosterTemplate', PosterTemplate)

 

当组件不是全局注册的时候 我们使用递归组件需要经过处理才使用
解决方案：

方案一
推荐使用 webpack的异步组件 通过 import 引入如下
异步组件的注册是一个箭头函数

 components: {
    PosterTemplate: () => import('./Template.vue')
  },

方案二   

  beforeCreate: function () {
  //beforeCreate () {
    // 官方文档给出的是require
    // this.$options.components.PosterTemplate = require('./Template.vue')
    // 在基于vue-cli@2.8.1按照上面的写法还是会报错
    // Failed to mount component: template or render function not defined.
    // 所以我们应该改为基于es6的写法异步加载一个组件如下
    this.$options.components.PosterTemplate = () => import('./Template.vue')
  },

注意：vue 生命周期函数不可用箭头函数  beforeCreate    （methods里面的函数同样道理）

因为箭头函数是和父级上下文绑定在一起的，this 不会是如你所预期的 Vue 实例，经常导致报错

vue Error in beforeCreate hook: "TypeError: Cannot read property '$options' of undefined"

 

参考资料：
1、https://cn.vuejs.org/v2/guide...
2、https://cn.vuejs.org/v2/guide...