寫在前面

創(chuàng)新互聯(lián)公司2013年開創(chuàng)至今，先為呼瑪?shù)确?wù)建站，呼瑪?shù)鹊仄髽I(yè)，進行企業(yè)商務(wù)咨詢服務(wù)。為呼瑪企業(yè)網(wǎng)站制作PC+手機+微官網(wǎng)三網(wǎng)同步一站式服務(wù)解決您的所有建站問題。

首先，本篇文章所開發(fā)的組件并非一個已經(jīng)開源的上線組件，所以如果你急于需要一個插件來只做你的項目，那么并不能帶給你及時的幫助。這個組件的開發(fā)預(yù)計寫兩篇文章，一遍寫組件，一篇寫組件邏輯。這篇文章也是我自己開發(fā)的從無到有的過程，所以它可以為你提供一些Tree組件開發(fā)的思路，代碼寫到一定程度，不能完全依賴插件了，有時間可以看看插件源碼或者動手去開發(fā)，這樣真的能加深對技術(shù)的掌握程度。

開發(fā)過程

1.數(shù)據(jù)倉庫-Vuex

2.組件的循環(huán)創(chuàng)建-遞歸組件

需求決定了我的技術(shù)選型，項目需求是一個中國各級政府列表的選擇，后臺基于大數(shù)據(jù)去匯總各級政府網(wǎng)站的文章決策，然后交給前端去展示，左側(cè)顯示各級政府的Tree，右側(cè)顯示具體文章。因為政府?dāng)?shù)據(jù)的不確定性，所以顯示政府的Tree的每一層級也是動態(tài)獲取的，就比如北京市下級的海淀區(qū)政府在一小時前可能不存在某某政策文章,那么北京市節(jié)點的子節(jié)點中就不會包含海淀區(qū)這一子節(jié)點，但是10分鐘前網(wǎng)站發(fā)布了一篇文章,那么就需要在北京市中添加海淀區(qū)，為了良好的實時性效果,每一級的子節(jié)點都不固定。

因此 樹狀結(jié)構(gòu)的data是變化的而不是在初始化的時候就固定好 的，數(shù)據(jù)驅(qū)動Dom的思想，data有多少層級，Dom就有多少層級，data不定，所以Dom也無法提前定義好層級，決定采用Vue的遞歸組件，組件遞歸自身實現(xiàn)無限制層級的渲染。需求中每一個節(jié)點的Tree都具有增刪改的功能，因為data是單例的，全局維護著一個data數(shù)據(jù)源頭，增刪改也就是操作data第n個子節(jié)點的某個子元素，因此采用了Vuex作為一個data存放的倉庫( 這不是一個組件庫,只是一個項目的應(yīng)用 )。

項目的關(guān)鍵點:

1.動態(tài)加載子節(jié)點,也就是說頁面加載的時候,根節(jié)點的 nodes 子節(jié)點數(shù)組可能是個空數(shù)組,每次單擊節(jié)點去獲取子節(jié)點數(shù)組。

2.全局單例的樹節(jié)點對象 data 對象,每次得到新的子節(jié)點，需要去維護這個對象,因為數(shù)據(jù)與dom動態(tài)綁定,所以每次數(shù)據(jù)對象內(nèi)部發(fā)生了變化,dom也會重繪。

vue對虛擬dom的映射通過使用diff算法進行了優(yōu)化,所以不用擔(dān)心，重繪造成頁面閃屏

樹 data 數(shù)據(jù)結(jié)構(gòu)如下:

let data = {
 id: "01",
 lable: "政府機構(gòu)",
 nodes: [
  {
  id: "02",
  lable: "中央機關(guān)",
  nodes: [{
   //..
  }]
  },
  {
  id: "03",
  lable: "直轄市",
  nodes: [{
   //..
   //北京市...
   //天津市..
  }]
  },
 ]
 };

顯示成這樣:

每一個節(jié)點包含id，label，nodes三個屬性，nodes往下延伸子節(jié)點，一共有多少級不確定根據(jù)后臺獲取得到。

遞歸組件

一個簡單的遞歸組件的示例如下：

TreeMenu.vue聲明組件TreeMenu,并向外暴露，在組件內(nèi)部調(diào)用自身,也就是一個遞歸的思想，綁定的dataNodes有多少層級，那就會遞歸多少層，因為每一層都有v-for都會循環(huán)子節(jié)點。綁定具體數(shù)據(jù)的時候再具體分析。不斷調(diào)用自身,當(dāng)然這只是一個例子,實際情況還要改造一下:

新建TreeMenu.vue，作為顯示節(jié)點的邏輯組件：

創(chuàng)建Tree.vue作為節(jié)點樹的入口:

在Tree.vue入口組件里引入子組件TreeMenu.vue，并且向子組件傳遞數(shù)據(jù)label和nodes，這里data先預(yù)定義一個簡單的對象，后面會動態(tài)獲取。

TreeMenu.vue作為樹形菜單組件，負(fù)責(zé)遞歸和數(shù)據(jù)渲染，它會接受來自入口組件傳遞來的label和nodes數(shù)據(jù)，進行渲染， 并且繼續(xù)遞歸傳遞nodes和label 。

在從父組件接收nodes和label后，先循環(huán)渲染n個tree-menu組件，然后每一個tree-menu又會遞歸自身，所以數(shù)據(jù)就這樣一層層向下傳遞nodes=>nodes.node=>nodes.node.node,此時已經(jīng)完成了數(shù)據(jù)與Dom的綁定，可以修改一下Tree.vue中的tree數(shù)據(jù)源，看一下組件是否動態(tài)改變了?，F(xiàn)在渲染如下圖：

數(shù)據(jù)正確渲染，現(xiàn)在需要加一些樣式和點擊事件（展開與收縮），就不做詳細(xì)介紹了，代碼如下: (向下傳遞depth參數(shù)來獲取層級索引)

//Tree.vue


//TreeMenu.vue

修改后會展開收縮與縮進，一些箭頭旋轉(zhuǎn)等樣式問題就不詳細(xì)寫了。

總結(jié)

以上所述是小編給大家介紹的Vue遞歸組件+Vuex開發(fā)樹形組件Tree--遞歸組件的簡單實現(xiàn)，希望對大家有所幫助，如果大家有任何疑問請給我留言，小編會及時回復(fù)大家的。在此也非常感謝大家對創(chuàng)新互聯(lián)網(wǎng)站的支持！