小編給大家分享一下Vue2遞歸組件如何實現樹形菜單，相信大部分人都還不怎么了解，因此分享這篇文章給大家參考一下，希望大家閱讀完這篇文章后大有收獲，下面讓我們一起去了解一下吧！

效果如下圖，點擊后打開二級菜單，再點擊后打開三級。

//js 
//引子
//思想：當v-if=‘false'時，循環時進行的。所以一開始就設置為false。
 ggg:{
  name:'gs',
  template:`
   

   　　我是p標簽
 

     //這兒show必須要初始值為false，不然就是堆棧溢出，死循環。
   　　 　　　　　　　　　　　　

    //這個是循環組件。命名后當函數使。
   
　　　　　　　　　
}

由于每次遞歸組件，就相當于實例化了一次組件。所有寫在組件data中的值都是該組件專屬的。

樹狀結構：

我們在父組件給出一個數據，子組件調用這個數據，然后子組件的子組件調用它父組件的數據，如此循環下去。只要數據結構相同，他們調用的方法相同，就行的通。當最后沒有子組件的時候，
它不會報錯，這個應該是被vue優化了。

思想：遞歸調用某個組件，而這個組件的作用就是解析出此層的數據。因此數據的格式就有技巧：

msg:[{//對此數組遍歷。                             

 js
  text:1, //第一層數據 ，要顯示1，就要對頂層text遍歷，xxx.text就得到1。
    //點擊‘1'彈出1-1就需要將父組件的xxx.next傳給子組件。
  next:[{
   text:'1-1',//第二層數據
   next:[{
   text:'1-1-1',//第三層數據
   next:[{
    text:'1-1-1-1',
   }]
   }]
  }]
 },{
  text:2, //第一層數據
 },{
 text:3, //第一層數據
 }]

//html
　　

 　　 //這兒寫在父組件模板中。
 　

//js
ggg:{
  name:'gs',// 這兒必須起個名字，這個名字其實就是構造函數的名字。沒有名字無法遞歸組件。
  template:`// 構造函數的return值,模板。
    
　　　　　　 
   {{a.text}}//第一次1、2、3；第二次 1-1 ，第三次1-1-1，第四次1-1-1-1 
    // 這兒遞歸用組件（構造函數），代碼運行到這兒時會返回去調用。這兒有個很重要的操作，將這一層的a.text數據傳到下一層去，并且改為text
  
  `,
  props:['msg'],//這個是接收父組件過的值
}

到此基本概念已經齊全了。

點擊1 出現1-1：

// 在li標簽添加一個點擊事件，改變show的值。
　　{{a.text}}
　　　　　　　　　　　

  //官網上說了，這兒是show為true才會遞歸。就是解析下一次數據。
　

點擊1想出現1-2：修改data的值，從頂層數據出現1 2 3可以推斷出來。

全代碼：

 

  //組件使用 父組件傳msg 子組件接收(：msg）
 

以上是“Vue2遞歸組件如何實現樹形菜單”這篇文章的所有內容，感謝各位的閱讀！相信大家都有了一定的了解，希望分享的內容對大家有所幫助，如果還想學習更多知識，歡迎關注創新互聯網站建設公司行業資訊頻道！

另外有需要云服務器可以了解下創新互聯建站www.cdcxhl.com，海內外云服務器15元起步，三天無理由+7*72小時售后在線，公司持有idc許可證，提供“云服務器、裸金屬服務器、高防服務器、香港服務器、美國服務器、虛擬主機、免備案服務器”等云主機租用服務以及企業上云的綜合解決方案，具有“安全穩定、簡單易用、服務可用性高、性價比高”等特點與優勢，專為企業上云打造定制，能夠滿足用戶豐富、多元化的應用場景需求。