Vue組件遞歸——組件化開發的必備技能！

---

theme: qklhk-chocolate

不知道大家有沒遇到過這樣的場景：渲染列表數據的時候，列表的子項還是列表。如果層級少尚且可以用幾個for循環搞定，但是層級多或者層級不確定就有點無從下手了。

其實這就是樹形結構數據，像常見的組織架構圖，文件夾目錄，導航菜單等都屬於這種結構。很多組件庫都帶有樹形組件，但往往樣式不是我們想要的，改起來也非常的費勁。那麼，如何自己渲染這些數據呢？答案就是——組件遞歸！

效果展示

以上就是使用組件遞歸，並加入簡單交互的展示效果。點擊節點會在控制枱輸出節點對應的數據，如果有子節點，則會展開或收起子節點。接下來我們就看看如何實現以上效果吧！

渲染完整數據

渲染數據這一步非常簡單，首先是把樹形結構封裝成一個列表組件，其次判斷每一項有沒有子節點，如果有子節點，再使用自身組件去渲染就可以了。

src/components/myTree.vue ```js

``` src/App.vue

```js

```

效果如下

獲取節點數據

接下來我們要做的是，點擊節點時在控制枱輸出對應的數據。首先我們使用 $emit，將一級節點的 item 傳遞出去，也就是子傳父的方法，相信大家都會。

其次是將內層節點的數據傳遞出去，同樣使用子傳父的方法，只是我們需要給組件裏面的 my-tree 綁定@node-click="$emit('node-click', $event)"，這樣每次子級每次都可以調用父級的 node-click 方法，父級又調用它的父級 node-click 方法，最終調的都是最外層的 node-click 方法，我們只需要在這個過程中，把數據傳遞過去就可以了。這塊有點繞，相信大家多看幾遍應該可以看懂。修改如下：

src/components/myTree.vue ```js

... itemNodeClick(item) { this.$emit("node-click", item) } ``` src/App.vue

js <my-tree :tree-data="treeData" @node-click="nodeClick"></my-tree> ... nodeClick(val) { console.log(val) }

效果如下

動態展開收起

這一步的思路是給組件設置一個數組，數組中存放的是當前列表中需要展開的節點的id，當點擊節點的時候添加或刪除節點id，然後判斷每個節點的id在不在這個數組，在則顯示子節點，不在則隱藏子節點。

src/components/myTree.vue ```js

... data() { return { expandedKeys: [] // 當前列表需要展開的節點id組成的數組 } }, methods: { nodeClick(item) { this.$emit('node-click', item) if (item.children && item.children.length) { let index = this.expandedKeys.indexOf(item.id) if (index > -1) { // 如果當前節點id存在數組中，則刪除 this.expandedKeys.splice(index, 1) } else { // 如果當前節點id不存在數組中，則添加 this.expandedKeys.push(item.id) } } }, isOpen(id) { // 判斷節點id在不在數組中，在則顯示，不在則隱藏 return this.expandedKeys.includes(id) } } ```

效果如下

最後我們再添加一些樣式，就大功告成啦！

完整代碼

src/components/myTree.vue ```js

``` src/App.vue

```js

```

效果如下

以上就是今天的分享！有興趣的小夥伴可以動手試一哈，把組件進一步封裝，或修改成自己想要的樣式。 Vue官方的樹形視圖：https://cn.vuejs.org/v2/examples/tree-view.html

如果覺得有用，不要忘了點個贊呦！年前最後一次更文了，提前祝大家新春快樂！愛情、事業虎虎生威（～￣▽￣）↗