快捷導(dǎo)航

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

更新時間：2021年08月20日 11:03:31 作者：吃個石頭

這篇文章主要為大家詳細(xì)介紹了Vue2遞歸組件實(shí)現(xiàn)樹形菜單的相關(guān)代碼，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價值，感興趣的小伙伴們可以參考一下

今天看了老長時間遞歸組件，官方給的教程太簡便了，根本看不出到底怎么用。于是自己查網(wǎng)摸索了一下，這兒只把核心思想寫出來。

效果如下圖，點(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)最后沒有子組件的時候，
它不會報(bào)錯，這個應(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>

以上就是本文的全部內(nèi)容，希望對大家的學(xué)習(xí)有所幫助，也希望大家多多支持腳本之家。

您可能感興趣的文章: