什么是組件：

眾所周知組件是Vue.js最強大的功能之一。組件可以擴展HTML元素，封裝可重用的代碼。在較高層面上，組件是自定義的元素，Vue.js的編譯器為它添加特殊功能。在有些情況下，組件也可以是原生HTML元素的形式，以is特性擴展。下面話不多說了，來一起看看本文的正文內(nèi)容。

引言

寫了大大小小不少基于vue的項目，但是基本沒用到過組件循環(huán)引用的知識。

為了查缺補漏，照著官方文檔擼一個DEMO：組件之間的循環(huán)引用

本人的運行版本為 vue-cli@2.8.1，啟用項目后，將以下 js 文件和 vue 文件放置在相應的目錄中運行。

main.js

import Vue from 'vue'import App from './App'new Vue({ el: '#app', template: '<App/>', components: { App }})

main.js 導入 App 組件，并在 components 中注冊 App 組件。

App.vue

<template> <div id="app"> <li v-for="folder in folders"> <tree-folder v-bind:folder="folder"></tree-folder> </li> </div></template><script> import TreeFolder from './components/tree-folder' export default { data: function () { return { folders: [  {  name: 'folder1',  children: [{  name: 'folder1 - folder1',  children: [{  name: 'folder1 - folder1 - folder1'  }]  }, {  name: 'folder1 - folder2',  children: [{  name: 'folder1 - folder2 - folder1'  }, {  name: 'folder1 - folder2 - folder2'  }]  }]  },  {  name: 'folder 2',  children: [{  name: 'folder2 - folder1',  children: [{  name: 'folder2 - folder1 - folder1'  }]  }, {  name: 'folder2 - folder2',  children: [{  name: 'folder2-content1'  }]  }]  },  {  name: 'folder 3',  children: [{  name: 'folder3 - folder1',  children: [{  name: 'folder3 - folder1 - folder1'  }]  }, {  name: 'folder3 - folder2',  children: [{  name: 'folder3-content1'  }]  }]  } ] } }, components: { TreeFolder } }</script>

App 組件導入 TreeFolder 組件，并在 components 中注冊 TreeFolder 組件。

components/tree-folder.vue

<template> <p> <span>{{ folder.name }}</span> <tree-folder-contents :children="folder.children"></tree-folder-contents> </p></template><script> // 官方文檔：「在我們的例子中，將 tree-folder 組件做為切入起點。我們知道制造矛盾的是 tree-folder-contents 子組件，所以我們在 tree-folder 組件的生命周期鉤子函數(shù) beforeCreate 中去注冊 tree-folder-contents 組件」 export default { props: ['folder'], data: function () {  return {} }, beforeCreate: function () { // 官方文檔給出的是require // this.$options.components.TreeFolderContents = require('./tree-folder-contents.vue') // 在基于vue-cli@2.8.1按照上面的寫法還是會報錯 // Failed to mount component: template or render function not defined. // 所以我們應該改為基于es6的寫法異步加載一個組件如下  this.$options.components.TreeFolderContents = () => import('./tree-folder-contents.vue') } }</script>