Vue一個案例引發的遞歸組件的使用

lucas 發布于2019-08-26 12:23 / 2079人閱讀

摘要：今天我們繼續使用的擼我們的實戰項目，只有在實戰中我們才會領悟更多，光紙上談兵然并卵，繼上篇我們的一個案例引發的動態組件與全局事件綁定總結之后，今天來聊一聊我們如何在項目中使用遞歸組件。

今天我們繼續使用 Vue 的擼我們的實戰項目，只有在實戰中我們才會領悟更多，光紙上談兵然并卵，繼上篇我們的《Vue一個案例引發的動態組件與全局事件綁定總結》之后，今天來聊一聊我們如何在項目中使用遞歸組件。

信息的分類展示列表

這次我們主要是實現一個信息的分類展示列表存在二級/三級的分類，如下如所示：

看到這個很多人會想到這個實現起來很簡單啊，來個嵌套循環不就完事了。

對，你說的沒錯，事實就是這樣簡單。那么就先來看看這么簡單的列表怎么實現的，然后這個方案的劣勢在哪里。

首先看看我們的數據格式

list: [{
    name: "經濟",
    children: [{
        name: "如家"
    }, {
        name: "7天"     
    }]
}, {
    name: "舒適",
    children: [{
        name: "智選假日"
    }, {
        name: "全季"     
    }]
}]

基于上面的數據格式，我們的實現方式如下：


  
    {{item.name}}
  
  
    
      
        {{child.name}}

嗯，看上去非常完美，我們的列表也非常好的展現出來，大功告成。

可是突然有一天咱們的產品突然跑過來說，我們的數據現在多加了一級分類，現在變成這樣子了。

list: [{
    name: "經濟",
    children: [{
        name: "如家",
        children: [{
            name: "長江路-如家"
        }, {
            name: "望江路-如家"     
        }]
    }, {
        name: "7天",
        children: [{
            name: "長江路-7天"
        }, {
            name: "望江路-7天"     
        }]
    }]
}]

好吧，既然產品有需求數據有變化，那么我們就改代碼吧，于是我們在原有的代碼上繼續加上一層嵌套循環，這次又總算完成了，但是可能沒過兩天我們的數據又增加了一級分類怎么辦？還是繼續嵌套下去？

有些同學可能就會覺得了，哪有這么多層級的數據展示，肯定不會存在的，那只能說我們太年輕，我們不排除這種存在的可能，那如果我們遇到這種情況怎么辦？這里就要用到我們說的 遞歸組件 了，無論你的數據怎么增加我們都不用改動我們的代碼。

遞歸組件

什么是遞歸組件？簡單來說就是在組件中內使用組件本身，下面我們就來看看如何在項目中使用遞歸組件去解決我們上面問題。

首先我們先創建一個 List 的遞歸組件

注意上面的代碼中我們使用了 List 組件本身，完成這些之后，我們在外部父級組件中使用 List 組件時，不管我們的數據有多少層嵌套關系，都可以完美的自適應加載，我們再也不用通過嵌套嵌套在嵌套了。

最后我們來看看渲染后的結果

總結

如上就是我們今天要說的遞歸組件，小伙伴們趕緊上手試試吧。

類似與信息分類的展示在我們的項目中是非常常見的形式，我們利用遞歸組件可以很好的去解決問題

關注微信公眾號：六小登登。領取全套學習資源

云服務器 GPU云服務器遞歸組件 vue組件 vue組件開發 vue父子組件通訊

文章版權歸作者所有，未經允許請勿轉載,若此文章存在違規行為，您可以聯系管理員刪除。

轉載請注明本文地址：http://specialneedsforspecialkids.com/yun/108602.html

Element組件引發的Vue中mixins使用，寫出高復用組件

摘要：我們就來說說如何創建一個靈活的高復用的組件。在一款優秀的組件庫中有這么兩個組件與。什么是官方說法混入是一種分發組件中可復用功能的非常靈活的方式。對象可以包含實例中的所有選項，當組件使用對象時，對象中的所有選項將和組件中的選項進行合并。我們都知道 Vue 采用的是一種組件化開發模式，組件在 Vue 中一個非常重要的核心概念。每個組件都是一個完整的實例，組件的創建，組件間的通訊，組件如何...

AlphaGooo 2019-08-23 15:22 評論0 收藏0
Vue一個案例引發的動態組件與全局事件綁定總結

摘要：我們需要的最好效果肯定是當前的全局事件就在當前的組件下產生作用，當我們切換到其他組件時，事件自動刪除，于是我可能想到的就是利用鉤子函數去刪除這個全局事件。最近在自學 Vue 也了解了一些基本用法，也記錄了一些筆記有興趣的朋友可以去查看我的其他文章，技術這東西真的不能光靠看，看是沒有的，你必須要動手實踐，只有在實戰項目中才能發現問題，才能發現我們沒有掌握的知識點，然后發現問題解決問題，...

MycLambert 2019-08-23 13:03 評論0 收藏0
Vue一個案例引發「動畫」的使用總結

摘要：既然我們知道了方法，我們就來給它加一個簡單的動畫。動畫中還給我們提供了一些鉤子函數，我們可以使用鉤子函數構建動畫。它會告知我們的動畫完成，我們綁定了為，告訴組件跳過的檢測，使用。項目開發中動畫有著很重要的作用，而且也是用到的地方非常多，例如：鼠標的進入離開，彈窗效果，組件的顯示隱藏，列表的切換等等，可以說我們網頁上的動畫無處不在，也有人說了，這些東西也可以不使用動畫。對，你說的沒錯...

liuchengxu 2019-08-23 13:43 評論0 收藏0
前端知識點

摘要：原理對處理函數進行延時操作，若設定的延時到來之前，再次觸發事件，則清除上一次的延時操作定時器，重新定時。在目標發出內容改變的事件后，直接接收事件并作出響應。首先是目標的構造函數，他有個數組，用于添加觀察者。關于排序 js中sort函數的底層實現機制？ js中sort內置多種排序算法，是根據要排序數的亂序程度來決定使用哪一種排序方法。V8 引擎 sort 函數只給出了兩種排序 Inse...

wums 2019-08-23 15:53 評論0 收藏0
記錄一次利用Timeline Performance工具進行 React性能優化的真實案例

摘要：出現紅幀表示頁面已經超負荷，會出現卡頓，響應緩慢等現象。因此當滑動周日歷時已經不會有紅幀發生了。我的目的是每一次遞歸會調用一次與但是這樣寫只會在遞歸結束時調用一次因此修改如下這樣優化之后，發現內存占用下降一些，但是紅幀仍然存在。性能優化可以說是衡量一個前端程序員react使用水平的重要標準。在學習react之初的時候，由于對react不夠了解，寫的項目雖然功能都實現了，但是性能優化...

jsyzchen 2019-08-22 11:16 評論0 收藏0