Vue CLI組件循環引用踩坑，組件未註冊問題

Vue CLI組件循環引用踩坑（已解決），報錯提示："did you register the component correctly? For recursive components"

記錄一個Vue組件使用小小的坑。
複製代碼

背景介紹： 本人打算按照官方文檔思路寫一個用於顯示多級目錄的組件，思路借鑑官方文檔:

因此，分別在腳手架中建立了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
    }
複製代碼

問題解決了。

總結：
這個問題彷佛仍是出在循環引用上（兩個組件間沒法判斷起點，致使組件註冊失敗？），但報錯信息卻提示未註冊（這個問題沒能徹底理清楚）。不過這提示了一種更通用的方法：遇到這個報錯以後第一反應應該當即查一下組件，若是確實不是拼寫錯誤、忘記註冊的狀況，能夠採用聲明周期函數手動註冊。