本篇文章給大家分享的是有關(guān)Vue.js中怎么利用遞歸組件實現(xiàn)一個可折疊的樹形菜單，小編覺得挺實用的，因此分享給大家學(xué)習(xí)，希望大家閱讀完這篇文章后可以有所收獲，話不多說，跟著小編一起來看看吧。

創(chuàng)新互聯(lián)是專業(yè)的南湖網(wǎng)站建設(shè)公司，南湖接單;提供成都網(wǎng)站設(shè)計、成都網(wǎng)站建設(shè),網(wǎng)頁設(shè)計,網(wǎng)站設(shè)計,建網(wǎng)站,PHP網(wǎng)站建設(shè)等專業(yè)做網(wǎng)站服務(wù);采用PHP框架,可快速的進行南湖網(wǎng)站開發(fā)網(wǎng)頁制作和功能擴展;專業(yè)做搜索引擎喜愛的網(wǎng)站,專業(yè)的做網(wǎng)站團隊,希望更多企業(yè)前來合作!

在Vue.js中一個遞歸組件調(diào)用的是其本身，如：

Vue.component('recursive-component', {
  template: `
       `
 });

遞歸組件常用于在blog上顯示注釋、嵌套的菜單，或者基本上是父和子相同的類型，盡管具體內(nèi)容不同。例如:

現(xiàn)在給您演示一下如何有效地使用遞歸組件，我將通過建立一個可擴展/收縮的樹形菜單的來一步步進行。

數(shù)據(jù)結(jié)構(gòu)

一個樹狀UI的遞歸組件將是一些遞歸數(shù)據(jù)結(jié)構(gòu)的可視化表達。在本教程中，我們將使用樹狀結(jié)構(gòu)，其中每個節(jié)點都是一個對象：

一個 label 屬性。

如果它有子節(jié)點，一個 nodes 屬性，則它是一個或多個節(jié)點的數(shù)組屬性。

與所有樹結(jié)構(gòu)一樣，它必須有一個根節(jié)點，但可以無限深。

let tree = {
  label: 'root',
  nodes: [
   {
    label: 'item1',
    nodes: [
     {
      label: 'item1.1'
     },
     {
      label: 'item1.2',
      nodes: [
       {
        label: 'item1.2.1'
       }
      ]
     }
    ]
   }, 
   {
    label: 'item2' 
   }
  ]
 }

遞歸組件

讓我們做一個遞歸組件來顯示我們的稱為 TreeMenu 的數(shù)據(jù)結(jié)構(gòu)。它只顯示當(dāng)前節(jié)點的標(biāo)簽，并調(diào)用自己來顯示任何子節(jié)點。文件名：TreeMenu.vue，內(nèi)容如下：

如果你使用一個組件遞歸，必須先給 Vue.component 做一個全局的定義，或者，給它一個 name 屬性。否則，任何子組件將無法進一步調(diào)用它，你會得到一個不確定的“ undefined component error ”的錯誤提示。

基本事件

與任何遞歸函數(shù)一樣，你需要一個基本事件來結(jié)束遞歸，否則渲染將無限期地繼續(xù)下去，最終會導(dǎo)致堆棧溢出。

在樹菜單中，當(dāng)我們到達一個沒有子節(jié)點的節(jié)點的時候，我們希望停止遞歸。你能通過 v-if 做到這一功能，但我們選擇使用 v-for 將隱式地為我們實現(xiàn)它；如果 nodes 數(shù)組沒有任何進一步的定義 tree-menu 組件將被調(diào)用。 template.vue 文件如下：

使用用法

我們現(xiàn)在如何使用這個組件？首先，我們聲明一個 Vue 實例，具有一個數(shù)據(jù)結(jié)構(gòu)包括 data 屬性和定義過的 treemenu 組件。 app.js 文件如下：

import TreeMenu from './TreeMenu.vue'
 let tree = {
  ...
 }
 new Vue({
  el: '#app',
  data: {
   tree
  },
  components: {
   TreeMenu
  }
 })

請記住，我們的數(shù)據(jù)結(jié)構(gòu)有一個根節(jié)點。我們在主模板開始遞歸調(diào)用 TreeMenu 組件，使用根 nodes 屬性來props：