在Vue.js中如何實作元件間循環引用

元件(Component)是 Vue.js 最強大的功能之一。元件可以擴充 HTML 元素,封裝可重複使用的程式碼。以下這篇文章主要為大家介紹了關於Vue.js組件間循環引用的相關資料,文中透過範例程式碼介紹的非常詳細，需要的朋友可以參考下。

什麼是元件：

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

引言

寫了大大小小不少基於vue的項目，但是基本上沒用到過元件循環引用的知識。

為了查缺補漏，照著官方文檔擼一個DEMO：元件之間的循環引用

#本人的運行版本為vue-cli@2.8.1，啟用專案後，將以下js 檔案和vue 檔案放置在對應的目錄中運行。

main.js

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

main.js 匯入 App 元件，並在 components 中註冊 App 元件。

App.vue

<template>
 <p id="app">
 <li v-for="folder in folders">
 <tree-folder v-bind:folder="folder"></tree-folder>
 </li>
 </p>
</template>
<script>
 import TreeFolder from &#39;./components/tree-folder&#39;
 export default {
 data: function () {
 return {
 folders: [
  {
  name: &#39;folder1&#39;,
  children: [{
  name: &#39;folder1 - folder1&#39;,
  children: [{
  name: &#39;folder1 - folder1 - folder1&#39;
  }]
  }, {
  name: &#39;folder1 - folder2&#39;,
  children: [{
  name: &#39;folder1 - folder2 - folder1&#39;
  }, {
  name: &#39;folder1 - folder2 - folder2&#39;
  }]
  }]
  },
  {
  name: &#39;folder 2&#39;,
  children: [{
  name: &#39;folder2 - folder1&#39;,
  children: [{
  name: &#39;folder2 - folder1 - folder1&#39;
  }]
  }, {
  name: &#39;folder2 - folder2&#39;,
  children: [{
  name: &#39;folder2-content1&#39;
  }]
  }]
  },
  {
  name: &#39;folder 3&#39;,
  children: [{
  name: &#39;folder3 - folder1&#39;,
  children: [{
  name: &#39;folder3 - folder1 - folder1&#39;
  }]
  }, {
  name: &#39;folder3 - folder2&#39;,
  children: [{
  name: &#39;folder3-content1&#39;
  }]
  }]
  }
 ]
 }
 },
 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 组件的生命周期钩子函数 beforeCreate 中去注册 tree-folder-contents 组件」
 export default {
 props: [&#39;folder&#39;],
 data: function () {
  return {}
 },
 beforeCreate: function () {
 // 官方文档给出的是require
 // this.$options.components.TreeFolderContents = require(&#39;./tree-folder-contents.vue&#39;)
 // 在基于vue-cli@2.8.1按照上面的写法还是会报错
 // Failed to mount component: template or render function not defined.
 // 所以我们应该改为基于es6的写法异步加载一个组件如下
  this.$options.components.TreeFolderContents = () => import(&#39;./tree-folder-contents.vue&#39;)
 }
 }
</script>

TreeFolder 元件匯入 TreeFolderContents 元件，並在 components 中註冊 TreeFolderContents 元件。

components/tree-folder-contents.vue

<template>
 <ul>
 <li v-for="child in children">
  <tree-folder v-if="child.children" :folder="child"></tree-folder>
  <span v-else>{{ child.name }}</span>
 </li>
 </ul>
</template>
<script>
 import TreeFolder from &#39;./tree-folder&#39;
 export default {
 props: [&#39;children&#39;],
 components: {
  TreeFolder
 }
 }
</script>

TreeFolderContents 元件再導入TreeFolder 元件，並在components 註冊TreeFolder 元件，產生了循環引用。

上面是我整理給大家的，希望今後對大家有幫助。

相關文章：

在Node.js中如何建立小程式後台服務

在js中有關檔案載入優化方面的問題

使用nodejs mongodb vue如何設定ueditor

以上是在Vue.js中如何實作元件間循環引用的詳細內容。更多資訊請關注PHP中文網其他相關文章！