Vue.js 組件 - 組件間的循環引用示例

寫了大大小小很多基於vue的項目，可是基本沒用到過組件循環引用的知識。
爲了查缺補漏，照着官方文檔擼一個DEMO：組件之間的循環引用

本人的運行版本爲 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 組件的生命週期鉤子函數 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>

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 './tree-folder'
  export default {
    props: ['children'],
    components: {
      TreeFolder
    }
  }
</script>

TreeFolderContents 組件又導入 TreeFolder 組件，並在 components 中註冊 TreeFolder 組件，產生了循環引用。

參考資料：
一、http://lizhihua.me/2016/12/24...
二、https://cn.vuejs.org/v2/guide...
三、https://cn.vuejs.org/v2/guide...

歡迎關注個人博客 [ http://www.17biu.cn]