遞歸 相信很多同學已經不陌生了，算法中我們經常用遞歸來解決問題。比如經典的：從一個全為數字的數組中找出其中相加能等于目標數的組合。思路也不難，循環數組取值，不斷遞歸相加，直到滿足目標數條件。遞歸雖然能解決大部分，但弊處在于，很容易寫出死循環的代碼，導致爆棧。下面以我實際業務場景講講遞歸在vue組件中的應用。

完成一個完整的遞歸，我個人認為最重要的有兩點：

其中最重要的就是確定 什么時候跳出遞歸。遞歸組件實際上非常簡單，就是 A組件 里再調用 A組件，就形成了一個遞歸。以下面我遇到的業務來說，某天接到一個需求，需要在一堆用戶中根據不同標簽條件組合篩選出目標用戶，因此就有如下設計圖：

咋一看，可能會被懵住，但其實只要經過仔細分析，發現并不是很難，看圖不少同學會感覺，有點像我們常說的 套娃， 一層套一層。對于這種圖，我們首要分析其中 最小單元 是哪一個，上圖中很容易看出最小的是這一塊。圖中的大結構基本都是由這一小塊組合而成，只要先實現了這塊，其他無非就是通過 遞歸 來一層一層數據渲染。

后面的無非就是判斷數據結構，如果沒有子樹的話，就直接簡單渲染該項目。如果某項含有子樹的話，就得要重新渲染這塊組件，將子數據傳遞進去。所以思路其實非常簡單，假設我們的數據結構是這樣的：

{ type: ’or’, valueList: [ { condition: ’最近7天登錄次數’, login: ’!=’, value: 45 }, { condition: ’最近7天登錄次數’, login: ’!=’, value: 45 }, { type: ’and’ valueList: [ { condition: ’最近7天登錄次數’, login: ’!=’, value: 45 } ] } ]}

上面數據結構很清晰，可以看到當數組里面的子項目包含有 valueList 時表明需要重新渲染上圖所說的一小塊組件。因此我們可以簡單編碼如下(下面代碼還有可優化的地方)：

<template> <div class='label-list'> <el-tag type='primary' size='mini' class='logic'>{{ typeDict[treedata.type] }}</el-tag> <template v-for='(item, index) in treedata.valueList'> <ul v-if='!item.hasOwnProperty(’valueList’)' :key='’rule_’ + index'> <li>{{ item.condition }} {{ item.logic }} {{ item.value }}</li> </ul> </template> <template v-for='(item, index) in treedata.valueList'> <!-- 此處判斷有 valuelist 因此再次調用渲染本組件 進行子項的渲染 --> <label-shows-view v-if='item.hasOwnProperty(’valueList’)' :key='’tree_’ + index' :treedata='item'></label-shows-view> </template> </div></template><script>const _TYPE = { ’and’: ’且’, ’or’: ’或’}export default { name: ’LabelShowsView’, props: { treedata: { type: Object, required: true } }, data() { return { typeDict: _TYPE } }}</script>

不難看出，主要是要分析找出數據結構中重復的部分，一層一層渲染下去。其實，對于上面例子是純展示來說比較容易理解，如果加上有數據交互的話，就需要額外注意了。遞歸層級很深的話，事件傳遞、數據變更等都需要小心處理，就比如筆者在完成上述可視化配置篩選客群時就遇到了如下圖的：

可以添加、刪除子項，并且還可以拖拽每組進行位置的調整。這時就可以利用類似 冒泡 的方法，子組件即觸發事件也接受事件。比如刪除某一組條件時，需要通知父組件要刪除的是子數據的哪一項，如下：

<!-- labelRulesView.vue --><!-- 這個自定義組件就是本組件 即遞歸的組件 --><label-rules-view v-if='item.hasOwnProperty(’valueList’)' :label-list='labelList' :treedata='item' :current-index='index' @delGroup='funDelGroup'></label-rules-view><!-- 本組件監聽 delGroup 事件 --> <el-button size='mini' type='danger' icon='el-icon-delete' @click='handleDelNewGroup(currentIndex)'></el-button>// 刪除某個組handleDelNewGroup(index) { this.$emit(’delGroup’, index) // 向上層組件觸發事件},funDelGroup(index) { this.treedata.valueList.splice(index, 1)},

在遞歸組件中，很多時候這個組件即扮演著子組件，也扮演著父組件。因此要控制好數據之間的交互，否則很容易出現數據錯亂的情況

本文是筆者在實際業務場景中遇到并順手記錄，利用遞歸組件，我們甚至可以完成一些比較復雜的圖形展示。希望能幫到大家拓寬下思路，幫到你的話還是順手點個小心心（拒絕下次一定[doge]）

以上就是vue 遞歸組件的簡單使用示例的詳細內容，更多關于vue 遞歸組件的資料請關注好吧啦網其它相關文章！