Vue2遞歸組件如何實(shí)現(xiàn)樹形菜單

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

效果如下圖，點(diǎn)擊后打開二級菜單，再點(diǎn)擊后打開三級。

//js 
//引子
//思想：當(dāng)v-if=‘false'時，循環(huán)時進(jìn)行的。所以一開始就設(shè)置為false。
 ggg:{
  name:'gs',
  template:`
   <div>
   　　<p @click.stop='show=!show'>我是p標(biāo)簽</p> 

     //這兒show必須要初始值為false，不然就是堆棧溢出，死循環(huán)。
   　　 <gs v-if='show' ></gs>　　　　　　　　　　　　

    //這個是循環(huán)組件。命名后當(dāng)函數(shù)使。
   </div>　　　　　　　　　
}

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

樹狀結(jié)構(gòu)：

　　我們在父組件給出一個數(shù)據(jù)，子組件調(diào)用這個數(shù)據(jù)，然后子組件的子組件調(diào)用它父組件的數(shù)據(jù)，如此循環(huán)下去。只要數(shù)據(jù)結(jié)構(gòu)相同，他們調(diào)用的方法相同，就行的通。當(dāng)最后沒有子組件的時候，
它不會報錯，這個應(yīng)該是被vue優(yōu)化了。

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

msg:[{//對此數(shù)組遍歷。                             

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

//html
　　<div>
 　　<ggg :msg='msg'></ggg> //這兒寫在父組件模板中。
 　</div>

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

到此基本概念已經(jīng)齊全了。

點(diǎn)擊1 出現(xiàn)1-1：

<li v-for='a in msg' @click.stop.self='show=!show'>// 在li標(biāo)簽添加一個點(diǎn)擊事件，改變show的值。
　　{{a.text}}
　　<gs :msg='a.next' v-if='show' ></gs>　　　　　　　　　

  //官網(wǎng)上說了，這兒是show為true才會遞歸。就是解析下一次數(shù)據(jù)。
</li>　

點(diǎn)擊1想出現(xiàn)1-2：修改data的值，從頂層數(shù)據(jù)出現(xiàn)1 2 3可以推斷出來。

全代碼：

<template >
 <div>
 <ggg :msg='msg'></ggg> //組件使用 父組件傳msg 子組件接收(：msg）
 </div>
</template>

<script>


export default { //這兒用的腳手架，若是普通文件，這兒就是new Vue（{}）
 data(){
 return {
 msg:[{
  text:1,
  next:[{
   text:'1-1',
   next:[{
   text:'1-1-1',
   next:[{
    text:'1-1-1-1',
   }]
   }]
  },{
   text:'1-2' //1-2寫在這兒，第二層數(shù)據(jù)數(shù)組中的a[1].text就是‘1-2'
  }]
  },{
  text:2,
  
  },{
  text:3,
  
  }]
 }
 },
 components:{
 ggg:{
  name:'gs',
  template:`
  <ul >
  <li v-for='a in msg' @click.stop.self='show=!show'>
   {{a.text}}
   <gs :msg='a.next' v-if='show' ></gs>
  </li>
  </ul>`,
  props:['msg'],
  data(){
  return {
   show:false
  }
  }
 }
 }
}
</script>

以上是“Vue2遞歸組件如何實(shí)現(xiàn)樹形菜單”這篇文章的所有內(nèi)容，感謝各位的閱讀！相信大家都有了一定的了解，希望分享的內(nèi)容對大家有所幫助，如果還想學(xué)習(xí)更多知識，歡迎關(guān)注億速云行業(yè)資訊頻道！