亚洲乱码中文字幕综合,中国熟女仑乱hd,亚洲精品乱拍国产一区二区三区,一本大道卡一卡二卡三乱码全集资源,又粗又黄又硬又爽的免费视频

vue 遞歸組件的簡(jiǎn)單使用示例

 更新時(shí)間:2021年01月14日 08:52:55   作者:Trick93  
這篇文章主要介紹了vue 遞歸組件的簡(jiǎn)單使用示例,幫助大家更好的理解和使用vue框架,感興趣的朋友可以了解下

前言

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

在vue中使用

完成一個(gè)完整的遞歸,我個(gè)人認(rèn)為最重要的有兩點(diǎn):

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

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

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

后面的無非就是判斷數(shù)據(jù)結(jié)構(gòu),如果沒有子樹的話,就直接簡(jiǎn)單渲染該項(xiàng)目。如果某項(xiàng)含有子樹的話,就得要重新渲染這塊組件,將子數(shù)據(jù)傳遞進(jìn)去。所以思路其實(shí)非常簡(jiǎ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ù)組里面的子項(xiàng)目包含有 valueList 時(shí)表明需要重新渲染上圖所說的一小塊組件。因此我們可以簡(jiǎn)單編碼如下(下面代碼還有可優(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)行子項(xiàng)的渲染 -->
   <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í),對(duì)于上面例子是純展示來說比較容易理解,如果加上有數(shù)據(jù)交互的話,就需要額外注意了。遞歸層級(jí)很深的話,事件傳遞、數(shù)據(jù)變更等都需要小心處理,就比如筆者在完成上述可視化配置篩選客群時(shí)就遇到了如下圖的:

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

<!-- labelRulesView.vue -->
<!-- 這個(gè)自定義組件就是本組件 即遞歸的組件 -->
<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>

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

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

小結(jié)

本文是筆者在實(shí)際業(yè)務(wù)場(chǎng)景中遇到并順手記錄,利用遞歸組件,我們甚至可以完成一些比較復(fù)雜的圖形展示。希望能幫到大家拓寬下思路,幫到你的話還是順手點(diǎn)個(gè)小心心(拒絕下次一定[doge])

以上就是vue 遞歸組件的簡(jiǎn)單使用示例的詳細(xì)內(nèi)容,更多關(guān)于vue 遞歸組件的資料請(qǐng)關(guān)注腳本之家其它相關(guān)文章!

相關(guān)文章

  • vue-router中關(guān)于children的使用方法

    vue-router中關(guān)于children的使用方法

    這篇文章主要介紹了vue-router中關(guān)于children的使用方法,具有很好的參考價(jià)值,希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方,望不吝賜教
    2022-08-08
  • vue實(shí)現(xiàn)動(dòng)態(tài)列表尾部添加數(shù)據(jù)執(zhí)行動(dòng)畫

    vue實(shí)現(xiàn)動(dòng)態(tài)列表尾部添加數(shù)據(jù)執(zhí)行動(dòng)畫

    這篇文章主要介紹了vue實(shí)現(xiàn)動(dòng)態(tài)列表尾部添加數(shù)據(jù)執(zhí)行動(dòng)畫方式,具有很好的參考價(jià)值,希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方,望不吝賜教
    2022-04-04
  • 詳解 vue.js用法和特性

    詳解 vue.js用法和特性

    Vue.js目前已經(jīng)更新到2.x,功能和語法上有一定升級(jí)和修改,本文首先介紹基礎(chǔ)內(nèi)容。感興趣的朋友一起看看吧
    2017-10-10
  • Vue CLI3搭建的項(xiàng)目中路徑相關(guān)問題的解決

    Vue CLI3搭建的項(xiàng)目中路徑相關(guān)問題的解決

    這篇文章主要介紹了Vue CLI3搭建的項(xiàng)目中路徑相關(guān)問題的解決,小編覺得挺不錯(cuò)的,現(xiàn)在分享給大家,也給大家做個(gè)參考。一起跟隨小編過來看看吧
    2018-09-09
  • vue添加axios,并且指定baseurl的方法

    vue添加axios,并且指定baseurl的方法

    今天小編就為大家分享一篇vue添加axios,并且指定baseurl的方法,具有很好的參考價(jià)值,希望對(duì)大家有所幫助。一起跟隨小編過來看看吧
    2018-09-09
  • Vue中的局部組件介紹

    Vue中的局部組件介紹

    這篇文章主要介紹了Vue中的局部組件,文章圍繞Vue局部組件得相關(guān)資料展開內(nèi)容,需要的的小孩伙伴請(qǐng)參考下面文章的具體介紹,希望對(duì)你有所幫助
    2021-12-12
  • Element?Plus在el-form-item中設(shè)置justify-content無效的解決方案

    Element?Plus在el-form-item中設(shè)置justify-content無效的解決方案

    這篇文章主要介紹了Element?Plus在el-form-item中設(shè)置justify-content無效的解決方案,具有很好的參考價(jià)值,希望對(duì)大家有所幫助,如有錯(cuò)誤或未考慮完全的地方,望不吝賜教
    2023-10-10
  • Console高級(jí)用法總結(jié)

    Console高級(jí)用法總結(jié)

    Console 對(duì)象提供了瀏覽器控制臺(tái)調(diào)試的接口。在不同宿主環(huán)境上它的工作方式可能不一樣,但通常都會(huì)提供一套共性的功能,本文主要總結(jié)了Console的一些高級(jí)用法,感興趣的小伙伴可以參考一下
    2023-04-04
  • elementUI Tree 樹形控件的官方使用文檔

    elementUI Tree 樹形控件的官方使用文檔

    這篇文章主要介紹了elementUI Tree 樹形控件的官方使用文檔,用清晰的層級(jí)結(jié)構(gòu)展示信息,可展開或折疊。小編覺得挺不錯(cuò)的,現(xiàn)在分享給大家,也給大家做個(gè)參考。一起跟隨小編過來看看吧
    2019-04-04
  • 關(guān)于vue路由監(jiān)聽事件跳轉(zhuǎn)的問題

    關(guān)于vue路由監(jiān)聽事件跳轉(zhuǎn)的問題

    這篇文章主要介紹了關(guān)于vue路由監(jiān)聽事件跳轉(zhuǎn)的問題,具有很好的參考價(jià)值,希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方,望不吝賜教
    2022-08-08

最新評(píng)論