Vue CLI组件循环引用踩坑，组件未注册问题

背景介绍： 本人打算按照官方文档思路写一个用于显示多级目录的组件，思路借鉴官方文档:

 

所以，分别在脚手架中创建了TreeFold.Vue和TreeFoldContent.Vue两个文件，其中互相引用：
文件TreeFold.Vue代码：\

 <template >
  <div>
    <div v-for="(item,key) in root" :key="key">
      <p>{{item.label}}</p>
      <tree-fold-content v-if="item.children" :root="item.children"></tree-fold-content>
    </div>
  </div>
  
</template>
<script>
  import TreeFoldContent from './treefoldcontent'
  export default {
    props:["root"],
    name:'TreeFold',
    components: {
      TreeFoldContent
    },
  };
</script>
复制代码

文件TreeFoldContend.Vue代码：\

<template>
  <div>
    <div v-for="(item,key) in root" :key="key">
      <p>{{item.label }}</p>
      <tree-fold v-if="item.children" :root="item.children"></tree-fold>
    </div>
   </div>
</template>
<script>
  import TreeFold from './treefold'
  export default {
    props:['root'],
    name:'TreeFoldContent',
    components: {
      TreeFold,
    },
  };
复制代码

结果执行报错：

 

那么问题来了，错误信息指出TreeFoldContent.vue中没有注册组件<tree-fold>,但是我明明已经写了如下代码呀(是注册了吧？)：

import TreeFold from './treefold'
export default {
    props:['root'],
    name:'TreeFoldContent',
    components: {
      TreeFold,
    },
  };
复制代码

百思不得解，按照官方文档所说，即便发生相互引用也应该报： Failed to mount component: template or render function not defined. 这样的错而不是未注册！ 查了一下Overstack似乎也没有人遇到这个问题（这么写确实比较...额...垃圾代码，应该直接写递归的），最后只能再次打开官方文档，赫然写着：

？？？注册时机有影响？？？我想我应该查一下这个组件实例化之后到底存不存在！所以输出一下这个组件：

 

果然没有成功注册！那就试试官方手册中的方法，在生命周期中临时注册一下：

    beforeCreate() {
      this.$options.components.TreeFold = require('./treefold.vue').default
    }
复制代码

问题解决了。

总结：
这个问题似乎还是出在循环引用上（两个组件间无法判断起点，导致组件注册失败？），但报错信息却提示未注册（这个问题没能完全理清楚）。不过这提示了一种更通用的方法：遇到这个报错之后第一反应应该立即查一下组件，如果确实不是拼写错误、忘记注册的情况，可以采用声明周期函数手动注册。

转载于:https://juejin.im/post/5cd14b6a518825356d54b64a