寫(xiě)在前面
首先辰狡，本篇文章所開(kāi)發(fā)的組件并非一個(gè)已經(jīng)開(kāi)源的上線組件，所以如果你急于需要一個(gè)插件來(lái)只做你的項(xiàng)目菊匿，那么并不能帶給你及時(shí)的幫助付呕。這個(gè)組件的開(kāi)發(fā)預(yù)計(jì)寫(xiě)兩篇文章，一遍寫(xiě)組件跌捆，一篇寫(xiě)組件邏輯徽职。這篇文章也是我自己開(kāi)發(fā)的從無(wú)到有的過(guò)程，所以它可以為你提供一些Tree組件開(kāi)發(fā)的思路佩厚，代碼寫(xiě)到一定程度姆钉，不能完全依賴插件了，有時(shí)間可以看看插件源碼或者動(dòng)手去開(kāi)發(fā)抄瓦，這樣真的能加深對(duì)技術(shù)的掌握程度潮瓶。
開(kāi)發(fā)過(guò)程
1.數(shù)據(jù)倉(cāng)庫(kù)-Vuex
2.組件的循環(huán)創(chuàng)建-遞歸組件
需求決定了我的技術(shù)選型，項(xiàng)目需求是一個(gè)中國(guó)各級(jí)政府列表的選擇闺鲸，后臺(tái)基于大數(shù)據(jù)去匯總各級(jí)政府網(wǎng)站的文章決策筋讨，然后交給前端去展示埃叭，左側(cè)顯示各級(jí)政府的Tree摸恍，右側(cè)顯示具體文章。因?yàn)檎當(dāng)?shù)據(jù)的不確定性赤屋，所以顯示政府的Tree也是動(dòng)態(tài)獲取的立镶，就比如北京市下級(jí)的海淀區(qū)政府不一定存在政策文章那么就不會(huì)在樹(shù)狀結(jié)構(gòu)里顯示對(duì)應(yīng)的名稱。
因此樹(shù)狀結(jié)構(gòu)的data是變化的而不是在初始化的時(shí)候就固定好的类早，采用Vue數(shù)據(jù)驅(qū)動(dòng)Dom的思想媚媒，data有多少層級(jí)，Dom就有多少層級(jí)涩僻，data不定缭召，所以Dom也無(wú)法提前定義好層級(jí)栈顷，因此使用了Vue的遞歸組件，組件遞歸自身實(shí)現(xiàn)無(wú)限制層級(jí)的渲染嵌巷。需求中每一個(gè)節(jié)點(diǎn)的Tree都具有增刪改的功能萄凤，因?yàn)閐ata是單例的，全局維護(hù)著一個(gè)data數(shù)據(jù)源頭搪哪，增刪改也就是操作data第n個(gè)子節(jié)點(diǎn)的某個(gè)子元素靡努，因此采用了Vuex作為一個(gè)data存放的倉(cāng)庫(kù)。
data的數(shù)據(jù)結(jié)構(gòu)：
每一個(gè)節(jié)點(diǎn)包含id晓折，label惑朦，nodes三個(gè)屬性，nodes往下延伸子節(jié)點(diǎn)漓概，一共有多少級(jí)不確定根據(jù)后臺(tái)獲取得到漾月。
遞歸組件
遞歸組件的示例如下：TreeMenu.vue
TreeMenu.vue聲明組件TreeMenu,并向外暴露，在組件內(nèi)部調(diào)用自身<tree-menu>,也就是一個(gè)遞歸的思想垛耳，綁定的dataNodes有多少層級(jí)栅屏，那就會(huì)遞歸多少層，因?yàn)槊恳粚佣加衯-for都會(huì)循環(huán)子節(jié)點(diǎn)堂鲜。綁定具體數(shù)據(jù)的時(shí)候再具體分析栈雳。
1.Tree.vue、TreeMenu.vue
? ? 創(chuàng)建Tree.vue文件缔莲，作為組件樹(shù)的入口文件哥纫，類似于App.vue，數(shù)據(jù)data會(huì)在Tree.vue進(jìn)行一些初始化的操作痴奏。
? ? ?在Tree.vue入口組件里引入子組件TreeMenu.vue蛀骇，并且向子組件傳遞數(shù)據(jù)label和nodes，這里data先預(yù)定義一個(gè)簡(jiǎn)單的對(duì)象读拆，后面會(huì)動(dòng)態(tài)獲取擅憔。
????TreeMenu.vue作為樹(shù)形菜單組件，負(fù)責(zé)遞歸和數(shù)據(jù)渲染檐晕，它會(huì)接受來(lái)自入口組件傳遞來(lái)的label和nodes數(shù)據(jù)暑诸，進(jìn)行渲染，并且繼續(xù)遞歸傳遞nodes和label辟灰。
在從父組件接收nodes和label后个榕，先循環(huán)渲染n個(gè)tree-menu組件，然后每一個(gè)tree-menu又會(huì)遞歸自身芥喇，所以數(shù)據(jù)就這樣一層層向下傳遞 nodes=>nodes.node=>nodes.node.node,此時(shí)已經(jīng)完成了數(shù)據(jù)與Dom的綁定西采，可以修改一下Tree.vue中的tree數(shù)據(jù)源，看一下組件是否動(dòng)態(tài)改變了〖炭兀現(xiàn)在渲染如下圖：
數(shù)據(jù)正確渲染械馆，現(xiàn)在需要加一些樣式和點(diǎn)擊事件（展開(kāi)與收縮）胖眷，就不做詳細(xì)介紹了，代碼如下: (向下傳遞depth參數(shù)來(lái)獲取層級(jí)索引)
修改后會(huì)展開(kāi)收縮與縮進(jìn)霹崎，一些箭頭旋轉(zhuǎn)等樣式問(wèn)題就不詳細(xì)寫(xiě)了瘦材。
這一篇主要寫(xiě)遞歸組件的簡(jiǎn)單實(shí)現(xiàn)，下一篇寫(xiě)數(shù)據(jù)獲取方面仿畸，其實(shí)現(xiàn)在組件已經(jīng)寫(xiě)好了食棕，我們現(xiàn)在只需要關(guān)注數(shù)據(jù)層，數(shù)據(jù)變化Dom會(huì)自動(dòng)響應(yīng)變化的错沽。
