資訊專欄INFORMATION COLUMN
摘要：今天我們繼續(xù)使用的擼我們的實(shí)戰(zhàn)項(xiàng)目，只有在實(shí)戰(zhàn)中我們才會(huì)領(lǐng)悟更多，光紙上談兵然并卵，繼上篇我們的一個(gè)案例引發(fā)的動(dòng)態(tài)組件與全局事件綁定總結(jié)之后，今天來聊一聊我們?nèi)绾卧陧?xiàng)目中使用遞歸組件。
今天我們繼續(xù)使用 Vue 的擼我們的實(shí)戰(zhàn)項(xiàng)目，只有在實(shí)戰(zhàn)中我們才會(huì)領(lǐng)悟更多，光紙上談兵然并卵，繼上篇我們的《Vue一個(gè)案例引發(fā)的動(dòng)態(tài)組件與全局事件綁定總結(jié)》 之后，今天來聊一聊我們?nèi)绾卧陧?xiàng)目中使用遞歸組件。
信息的分類展示列表這次我們主要是實(shí)現(xiàn)一個(gè)信息的分類展示列表存在二級/三級的分類，如下如所示：
看到這個(gè)很多人會(huì)想到這個(gè)實(shí)現(xiàn)起來很簡單啊，來個(gè)嵌套循環(huán)不就完事了。
對，你說的沒錯(cuò)，事實(shí)就是這樣簡單。那么就先來看看這么簡單的列表怎么實(shí)現(xiàn)的，然后這個(gè)方案的劣勢在哪里。
首先看看我們的數(shù)據(jù)格式
list: [{
name: "經(jīng)濟(jì)",
children: [{
name: "如家"
}, {
name: "7天"
}]
}, {
name: "舒適",
children: [{
name: "智選假日"
}, {
name: "全季"
}]
}]
基于上面的數(shù)據(jù)格式，我們的實(shí)現(xiàn)方式如下：
{{item.name}}{{child.name}}
嗯，看上去非常完美，我們的列表也非常好的展現(xiàn)出來，大功告成。
可是突然有一天咱們的產(chǎn)品突然跑過來說，我們的數(shù)據(jù)現(xiàn)在多加了一級分類，現(xiàn)在變成這樣子了。
list: [{
name: "經(jīng)濟(jì)",
children: [{
name: "如家",
children: [{
name: "長江路-如家"
}, {
name: "望江路-如家"
}]
}, {
name: "7天",
children: [{
name: "長江路-7天"
}, {
name: "望江路-7天"
}]
}]
}]
好吧，既然產(chǎn)品有需求數(shù)據(jù)有變化，那么我們就改代碼吧，于是我們在原有的代碼上繼續(xù)加上一層嵌套循環(huán)，這次又總算完成了，但是可能沒過兩天我們的數(shù)據(jù)又增加了一級分類怎么辦？還是繼續(xù)嵌套下去？
有些同學(xué)可能就會(huì)覺得了，哪有這么多層級的數(shù)據(jù)展示，肯定不會(huì)存在的，那只能說我們太年輕，我們不排除這種存在的可能，那如果我們遇到這種情況怎么辦？這里就要用到我們說的 遞歸組件 了，無論你的數(shù)據(jù)怎么增加我們都不用改動(dòng)我們的代碼。
遞歸組件什么是遞歸組件？簡單來說就是在組件中內(nèi)使用組件本身，下面我們就來看看如何在項(xiàng)目中使用遞歸組件去解決我們上面問題。
首先我們先創(chuàng)建一個(gè) List 的遞歸組件
{{item.name}}
注意上面的代碼中我們使用了 List 組件本身，完成這些之后，我們在外部父級組件中使用 List 組件時(shí)，不管我們的數(shù)據(jù)有多少層嵌套關(guān)系，都可以完美的自適應(yīng)加載，我們再也不用通過嵌套嵌套在嵌套了。
最后我們來看看渲染后的結(jié)果
如上就是我們今天要說的遞歸組件，小伙伴們趕緊上手試試吧。
類似與信息分類的展示在我們的項(xiàng)目中是非常常見的形式，我們利用遞歸組件可以很好的去解決問題
關(guān)注微信公眾號：六小登登。領(lǐng)取全套學(xué)習(xí)資源
文章版權(quán)歸作者所有，未經(jīng)允許請勿轉(zhuǎn)載,若此文章存在違規(guī)行為，您可以聯(lián)系管理員刪除。
轉(zhuǎn)載請注明本文地址：http://systransis.cn/yun/108602.html
摘要：我們就來說說如何創(chuàng)建一個(gè)靈活的高復(fù)用的組件。在一款優(yōu)秀的組件庫中有這么兩個(gè)組件與。什么是官方說法混入是一種分發(fā)組件中可復(fù)用功能的非常靈活的方式。對象可以包含實(shí)例中的所有選項(xiàng)，當(dāng)組件使用對象時(shí)，對象中的所有選項(xiàng)將和組件中的選項(xiàng)進(jìn)行合并。 我們都知道 Vue 采用的是一種組件化開發(fā)模式，組件在 Vue 中一個(gè)非常重要的核心概念。每個(gè)組件都是一個(gè)完整的實(shí)例，組件的創(chuàng)建，組件間的通訊，組件如何...
摘要：我們需要的最好效果肯定是當(dāng)前的全局事件就在當(dāng)前的組件下產(chǎn)生作用，當(dāng)我們切換到其他組件時(shí)，事件自動(dòng)刪除，于是我可能想到的就是利用鉤子函數(shù)去刪除這個(gè)全局事件。 最近在自學(xué) Vue 也了解了一些基本用法，也記錄了一些筆記有興趣的朋友可以去查看我的其他文章，技術(shù)這東西真的不能光靠看，看是沒有的，你必須要?jiǎng)邮謱?shí)踐，只有在實(shí)戰(zhàn)項(xiàng)目中才能發(fā)現(xiàn)問題，才能發(fā)現(xiàn)我們沒有掌握的知識(shí)點(diǎn)，然后發(fā)現(xiàn)問題解決問題，...
摘要：既然我們知道了方法，我們就來給它加一個(gè)簡單的動(dòng)畫。動(dòng)畫中還給我們提供了一些鉤子函數(shù)，我們可以使用鉤子函數(shù)構(gòu)建動(dòng)畫。它會(huì)告知我們的動(dòng)畫完成，我們綁定了為，告訴組件跳過的檢測，使用。 項(xiàng)目開發(fā)中動(dòng)畫有著很重要的作用，而且也是用到的地方非常多，例如：鼠標(biāo)的進(jìn)入離開，彈窗效果，組件的顯示隱藏，列表的切換等等，可以說我們網(wǎng)頁上的動(dòng)畫無處不在，也有人說了，這些東西也可以不使用動(dòng)畫。 對，你說的沒錯(cuò)...
摘要：原理對處理函數(shù)進(jìn)行延時(shí)操作，若設(shè)定的延時(shí)到來之前，再次觸發(fā)事件，則清除上一次的延時(shí)操作定時(shí)器，重新定時(shí)。在目標(biāo)發(fā)出內(nèi)容改變的事件后，直接接收事件并作出響應(yīng)。首先是目標(biāo)的構(gòu)造函數(shù)，他有個(gè)數(shù)組，用于添加觀察者。 關(guān)于排序 js中sort函數(shù)的底層實(shí)現(xiàn)機(jī)制？ js中sort內(nèi)置多種排序算法，是根據(jù)要排序數(shù)的亂序程度來決定使用哪一種排序方法。V8 引擎 sort 函數(shù)只給出了兩種排序 Inse...
摘要：出現(xiàn)紅幀表示頁面已經(jīng)超負(fù)荷，會(huì)出現(xiàn)卡頓，響應(yīng)緩慢等現(xiàn)象。因此當(dāng)滑動(dòng)周日歷時(shí)已經(jīng)不會(huì)有紅幀發(fā)生了。我的目的是每一次遞歸會(huì)調(diào)用一次與但是這樣寫只會(huì)在遞歸結(jié)束時(shí)調(diào)用一次因此修改如下這樣優(yōu)化之后，發(fā)現(xiàn)內(nèi)存占用下降一些，但是紅幀仍然存在。 性能優(yōu)化可以說是衡量一個(gè)前端程序員react使用水平的重要標(biāo)準(zhǔn)。 在學(xué)習(xí)react之初的時(shí)候，由于對react不夠了解，寫的項(xiàng)目雖然功能都實(shí)現(xiàn)了，但是性能優(yōu)化...
閱讀 966·2019-08-30 15:55
閱讀 560·2019-08-26 13:56
閱讀 2094·2019-08-26 12:23
閱讀 3313·2019-08-26 10:29
閱讀 611·2019-08-26 10:17
閱讀 2881·2019-08-23 16:53
閱讀 710·2019-08-23 15:55
閱讀 2836·2019-08-23 14:25
