最近在開發(fā)一個小模塊，碰到了這么一個需求： 在一個頁面中顯示一級分類纤壁，當一級分類有子類的話，點開一級分類捺信，展現(xiàn)二級分類酌媒，假設(shè)二級分類中的個別某一項有屬于他的子分類的時候，點開他迄靠，繼續(xù)顯示它的子分類秒咨。上面所說的每級分類中，子分類數(shù)目可能是一項或者多項掌挚，數(shù)目不固定雨席，具體看返回來的數(shù)據(jù)有多少。
我擦嘞吠式，這個不就是遞歸么陡厘。抽米。。糙置。云茸。。然而谤饭，在vue中查辩，官方是不推薦直接操作dom樹的，因為這樣會非常損耗性能网持。宜岛。。功舀。這樣一來萍倡，直接操作dom樹這個想法就只能丟棄了。辟汰。列敲。這可如何是好呢？于是帖汞，我就開始度娘了戴而。。翩蘸。所意。然后度到在官網(wǎng)里有遞歸組件這么一回事，但也僅限于介紹催首，其它特么的什么也木有扶踊，但是說了最重要的一點，一定要有name屬性郎任，因為這個name屬性指代的就是組件本身秧耗。。舶治。然后我就接著找啊找啊分井，找到了一篇不錯的博文，具體鏈接地址: https://www.cnblogs.com/ychl/p/6075106.html 霉猛。不錯的一篇文章尺锚，不過個人感覺可以再細化點，于是經(jīng)過博主同意韩脏，進行二次個人解讀缩麸。 有朋友就納悶了:你咋那么懶铸磅。赡矢。杭朱。。我想說吹散，一切為了項目弧械，這可不是個人業(yè)余學習時間，我也是現(xiàn)在有點時間空民，怕以后忘記了刃唐，趕緊記起來，避免以后掉鏈子界轩。
我們上面說到了画饥，我們的遞歸應(yīng)該是按照數(shù)據(jù)來的。廢話浊猾，你如果沒有子類抖甘，你遞歸的毛線啊，所以葫慎，一切以數(shù)據(jù)為準衔彻。請看下面的一些列數(shù)據(jù)，來自于隔壁家的老黃的 文章 ： https://www.cnblogs.com/ychl/p/6075106.htmlvuejs學習--遞歸組件(樹型表格分享)
vardata = [{
"id": "1",
"data": {
"menuName": "項目管理",
"menuCode": "",
},
"childTreeNode": [{
"data": {
"menuName": "項目",
"menuCode": "BusProject",
},
"childTreeNode": []
}, {
"data": {
"menuName": "我的任務(wù)",
"menuCode": "BusProject", },
"childTreeNode": []
}, {
"data": {
"menuName": "人員周報",
"menuCode": "BusProject",
},
"childTreeNode": []
}]
}, {
"id": "2",
"data": {
"menuName": "數(shù)據(jù)統(tǒng)計",
"menuCode": "BusClock",
},
"childTreeNode": []
}, {
"id": "3",
"data": {
"menuName": "人事管理",
"menuCode": "",
},
"childTreeNode": []
}, {
"id": "4",
"data": {
"menuName": "基礎(chǔ)管理",
"menuCode": "",
},
"childTreeNode": []
}]
朋友們上面看到了偷办，數(shù)據(jù)data是一個數(shù)組艰额，數(shù)組里面有好幾項數(shù)據(jù)，所以我們第一步想到的是用 v-for這個指令椒涯，將數(shù)據(jù)一個個都給for出來柄沮，于是咱們說干就干。
大家對于上面的這個代碼應(yīng)該多少能看懂废岂，我覺得唯一有疑問的應(yīng)該是 為啥v-for 仍在了 ul 這個標簽上了呢铡溪。這里我這么解釋。我們的數(shù)組中(拿一級的舉例你就懂了)泪喊，每個數(shù)據(jù)都是一項棕硫，然而這每一項我們不知道它到底是有子分類的還是沒有子分類的，這個不是我們說了算袒啼，而是通過接口獲取到的數(shù)據(jù)說了算哈扮。那么，這一項到底有沒有子分類就無法判斷蚓再。這樣的話滑肉，我們的每一項應(yīng)該都是一個ul。
我們這么分析摘仅，假設(shè)我們的分類沒有子項靶庙，那么屬于它的那個ul中的第一個li只要顯示它對應(yīng)的數(shù)據(jù)就好啦，就像下面
{{model.data.menuName}}
這是不是很簡單呀
情況二娃属，假設(shè)我們循環(huán)到的那一項有子類六荒，也就是對象中的childTreeNode有數(shù)據(jù)护姆，那么這個時候，我們是不是就應(yīng)該把這些數(shù)據(jù) '遞歸出來' 了呢掏击，并且遞歸在屬于它的那一級菜單下面卵皂。重點來了，這可怎么把它遞歸出來呢砚亭？
思路：我們應(yīng)該有第二個列表項灯变，專門用于判斷它的childNodes中有沒有對應(yīng)的數(shù)據(jù)，假設(shè)沒有捅膘，啥也不做添祸，這點毋庸置疑。假設(shè)有寻仗，那么想辦法膝捞，自己調(diào)用自己，把childNodes屬性中的數(shù)據(jù)重新傳入我們的組件當中愧沟，讓它根據(jù)新的數(shù)據(jù)遍歷出來Ｊ咭А！沐寺！
文字太潦草林艘，我畫了張圖
子類屬性child變成了childTreeNode，data變成dataList什么的不要去糾結(jié)混坞，都是一樣的東西狐援，只是變名稱而已，請重點看我的紅線以及我標注的文字究孕。
在圖中你們可以看到啥酱，有個tree組件，他就是我們的遞歸組件了厨诸。你隨便瞟一眼镶殷，有沒有發(fā)現(xiàn)很簡單，不就是我上面說的那個東西嗎微酬。然而你可能發(fā)現(xiàn)了绘趋，我在父組件teamoutput中引用了它，并且將數(shù)據(jù)傳到了他的model屬性颗管。
*****在顯示完對應(yīng)數(shù)據(jù)之后陷遮，下面又有個ul標簽，并且這個ul標簽垦江，把我們對應(yīng)的childTreeNode屬性中的數(shù)據(jù)帽馋，給傳進去了。更加重要的是，這個組件items就是組件tree本身绽族，也就是說姨涡，我們在這里自己調(diào)用了自己，也就是遞歸了项秉。我們是隨便去遞歸的么绣溜？當然不是慷彤。我們在決定遞歸之前娄蔼，先去用計算屬性去判斷了childTreeNode屬性是否有子類數(shù)據(jù)，當它有的時候底哗，我們踩決定將數(shù)據(jù)傳入岁诉，實現(xiàn)遞歸，不然的畫跋选，它的v-if是false涕癣，那么就不會顯示。
講到這里前标，我相信各位心里都有點BS了吧坠韩。
希望我的講解對你有幫助。
