在Vue.js中一個遞迴元件呼叫的是其本身，如：

 Vue.component('recursive-component', {

   template: `<!--Invoking myself!-->

              <recursive-component></recursive-component>`

 });

遞迴元件常用於在blog上顯示註釋、巢狀的選單，或者基本上是父和子相同的型別，儘管具體內容不同。例如:

現在給您演示一下如何有效地使用遞迴元件，我將通過建立一個可擴充套件/收縮的樹形選單的來一步步進行。

資料結構

一個樹狀UI的遞迴元件將是一些遞迴資料結構的視覺化表達。在本教程中，我們將使用樹狀結構，其中每個節點都是一個物件：

1. 一個 label 屬性。

2. 如果它有子節點，一個 nodes 屬性，則它是一個或多個節點的陣列屬性。

與所有樹結構一樣，它必須有一個根節點，但可以無限深。

 let tree = {

   label: 'root',

   nodes: [

     {

       label: 'item1',

       nodes: [

         {

           label: 'item1.1'

         },

         {

           label: 'item1.2'
 
,

           nodes: [

             {

               label: 'item1.2.1'

             }

           ]

         }

       ]

     }, 

     {

       label: 'item2'  

     }

   ]

 }

遞迴元件

讓我們做一個遞迴元件來顯示我們的稱為 TreeMenu 的資料結構。它只顯示當前節點的標籤，並呼叫自己來顯示任何子節點。檔名：TreeMenu.vue，內容如下：

 <template>

   <div
 
 class="tree-menu">

     <div>{{ label }}</div>

     <tree-menu 

       v-for="node in nodes" 

       :nodes="node.nodes" 

       :label="node.label"

     >

     </tree-menu>

   </div>

 </template>

 <script>

   export default { 

     props: [ 'label', 'nodes' ],

     name: 'tree-menu'

   }

 </script>

如果你使用一個元件遞迴，必須先給 Vue.component 做一個全域性的定義，或者，給它一個 name 屬性。否則，任何子元件將無法進一步呼叫它，你會得到一個不確定的“undefined component error”的錯誤提示。

基本事件

與任何遞迴函式一樣，你需要一個基本事件來結束遞迴，否則渲染將無限期地繼續下去，最終會導致堆疊溢位。

在樹選單中，當我們到達一個沒有子節點的節點的時候，我們希望停止遞迴。你能通過 v-if 做到這一功能，但我們選擇使用 v-for 將隱式地為我們實現它；如果 nodes 陣列沒有任何進一步的定義 tree-menu 元件將被呼叫。template.vue檔案如下：

<template>

   <div class="tree-menu">

     ...

     <!--If `nodes` is undefined this will not render-->

     <tree-menu v-for="node in nodes"></tree-menu>

 </template>

使用用法

我們現在如何使用這個元件？首先，我們宣告一個Vue例項，具有一個數據結構包括data屬性和定義過的treemenu元件。app.js檔案如下：

 import TreeMenu from './TreeMenu.vue'

 let tree = {

   ...

 }

 new Vue({

   el: '#app',

   data: {

     tree

   },

   components: {

     TreeMenu

   }

 })

請記住，我們的資料結構有一個根節點。我們在主模板開始遞迴呼叫 TreeMenu 元件，使用根 nodes 屬性來props：

 <div id="app">

   <tree-menu :label="tree.label" :nodes="tree.nodes"></tree-menu>

 </div>

下面是它目前的樣子：

正確的姿勢

在視覺上識別子元件的“深度”是很好的，這樣使用者就可以從UI中獲得資料結構的感覺。讓我們縮排每一層的子節點來實現這個目標。

這是通過增加一個depth prop定義，通過 TreeMenu 來實現。我們將使用這個值動態地將內聯樣式與轉換繫結在一起：將使用transform: translate的CSS規則為每個節點的標籤，從而建立縮排。template.vue修改如下：

 <template>

   <div class="tree-menu">

     <div :style="indent">{{ label }}</div>

     <tree-menu 

       v-for="node in nodes" 

       :nodes="node.nodes" 

       :label="node.label"

       :depth="depth + 1"

     >

     </tree-menu>

   </div>

 </template>

 <script>

   export default { 

     props: [ 'label', 'nodes', 'depth' ],

     name: 'tree-menu',

     computed: {

       indent() {

         return { transform: `translate(${this.depth * 50}px)` }

       }

     }

   }

 </script>

depth 屬性在主模板中從零開始。在上面的元件模板中，你可以看到每次傳遞到任何子節點時這個值都會遞增。

 <div id="app">

   <tree-menu 

     :label="tree.label" 

     :nodes="tree.nodes"

     :depth="0"

   ></tree-menu>

 </div>

注意：記得 v-bind depth值以確保它是一個JavaScript數字型別而不是字串。

展開/收起

由於遞迴資料結構可能很大，所以顯示它們的一個很好的UI技巧是隱藏除根節點以外的所有節點，以便使用者可以根據需要展開或收起節點。

為此，我們將增加一個區域性屬性showChildren 。如果他的值為False，子節點將不會被渲染。此值應通過點選節點切換，所以我們需要使用一個單擊事件的監聽器方法 toggleChildren 來進行管理。template.vue檔案修改如下：

<template>

   <div class="tree-menu">

     <div :style="indent" @click="toggleChildren">{{ label }}</div>

     <tree-menu 

       v-if="showChildren"

       v-for="node in nodes" 

       :nodes="node.nodes" 

       :label="node.label"

       :depth="depth + 1"

     >

     </tree-menu>

   </div>

 </template>

 <script>

   export default { 

     props: [ 'label', 'nodes', 'depth' ],

     data() {

       return { showChildren: false }

     },

     name: 'tree-menu',

     computed: {

       indent() {

         return { transform: `translate(${this.depth * 50}px)` }

       }

     },

     methods: {

       toggleChildren() {

         this.showChildren = !this.showChildren;

       }

     }

   }

 </script

總結

這樣，我們就有了一個工作樹選單。用來畫龍點睛的一個方法是，你可以新增一個加號/減號圖示，這樣可以使UI的顯示更加明顯。我還增加了的很好的字型和計算效能在原來 showChildren 的基礎上。

來自匯智網（www.hubwiz.com，有很多價效比極高的vue.js內容哦）的小智翻譯。

分享Vue.js 2 的最新全家桶系列教程：