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
    }
複制代碼