快捷導(dǎo)航

vue 遞歸組件的簡單使用示例

更新時間：2021年01月14日 08:52:55 作者：Trick93

這篇文章主要介紹了vue 遞歸組件的簡單使用示例，幫助大家更好的理解和使用vue框架，感興趣的朋友可以了解下

前言

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

在vue中使用

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

確定好進(jìn)入遞歸的條件;
確定好跳出遞歸的條件;

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

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

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

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

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

<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 因此再次調(diào)用渲染本組件 進(jìn)行子項的渲染 -->
   <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>

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

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

<!-- labelRulesView.vue -->
<!-- 這個自定義組件就是本組件 即遞歸的組件 -->
<label-rules-view v-if="item.hasOwnProperty('valueList')" :label-list="labelList" :treedata="item" :current-index="index" @delGroup="funDelGroup"></label-rules-view>
<!-- 本組件監(jiān)聽 delGroup 事件 -->
 
<el-button size="mini" type="danger" icon="el-icon-delete" class="operate-btn" @click="handleDelNewGroup(currentIndex)"></el-button>

// 刪除某個組
handleDelNewGroup(index) {
 this.$emit('delGroup', index) // 向上層組件觸發(fā)事件
},
funDelGroup(index) {
 this.treedata.valueList.splice(index, 1)
},

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