這次我們主要是實現乙個資訊的分類展示列表存在二級/**的分類，如下如所示：
看到這個很多人會想到這個實現起來很簡單啊，來個巢狀迴圈不就完事了。
對，你說的沒錯，事實就是這樣簡單。那麼就先來看看這麼簡單的列表怎麼實現的，然後這個方案的劣勢在**。
首先看看我們的資料格式
list: [, ]基於上面的資料格式，我們的實現方式如下：}, , ]
}]
<嗯，看上去非常完美，我們的列表也非常好的展現出來，大功告成。div
class
="list-item"
v-for
="(item, index) in list"
:key
="index"
>
<
div
class
="item-name"
>
<
span
>}
span
>
div>
<
div
v-if
="item.children"
class
="children-item"
>
<
div
v-for
="(child, index) in item.children"
:key
="index"
>
<
div
class
="item-name"
>
<
span
>}
span
>
div>
div>
div>
div>
可是突然有一天咱們的產品突然跑過來說，我們的資料現在多加了一級分類，現在變成這樣子了。
list: [, ]好吧，既然產品有需求資料有變化，那麼我們就改**吧，於是我們在原有的**上繼續加上一層巢狀迴圈，這次又總算完成了，但是可能沒過兩天我們的資料又增加了一級分類怎麼辦？還是繼續巢狀下去？}, , ]
}]}]
有些同學可能就會覺得了，哪有這麼多層級的資料展示，肯定不會存在的，那只能說我們太年輕，我們不排除這種存在的可能，那如果我們遇到這種情況怎麼辦？這裡就要用到我們說的遞迴元件了，無論你的資料怎麼增加我們都不用改動我們的**。
什麼是遞迴元件？簡單來說就是在元件中內使用元件本身，下面我們就來看看如何在專案中使用遞迴元件去解決我們上面問題。
首先我們先建立乙個 list 的遞迴元件
<注意上面的**中我們使用了 list 元件本身，完成這些之後，我們在外部父級元件中使用 list 元件時，不管我們的資料有多少層巢狀關係，都可以完美的自適應載入，我們再也不用通過巢狀巢狀在巢狀了。template
>
<
div>
<
div
class
="list-item"
v-for
="(item, index) in list"
:key
="index"
>
<
div
class
="item-name"
>
<
span
>}
span
>
div>
<
div
v-if
="item.children"
class
="children-item"
>
<
list
:list
="item.children"
>
list
>
div>
div>
div>
template
>
<
script
>
export
default
};script
>
<最後我們來看看渲染後的結果template
>
<
div
class
="list-detail"
>
<
list
:list
="list"
>
list
>
div>
template
>
<
script
>
import list from
"./components/list";
export
default
, data() ,
]},,]}]
}]}}}script
>
Vue遞迴元件實現多級列表分類
資訊的分類展示 看到這種格式，我想好多人肯定會說，我可以使用v for的巢狀迴圈不就完事了。對，沒毛病這樣的話也可以做，但是如果資料又多加了 很多 級分類呢 使用v for也能實現，但是 量是不是太大了呢！也不適合後期的維護，這個時候呢，我們就可以使用我們所說道的 遞迴元件 了，使用遞迴元件，無論你...
VUE遞迴樹形實現多級列表
簡單來說就是在元件中內使用元件本身。如果出現很多下拉列表，同級，分級資料，層級混雜，可以使用v for的巢狀迴圈不就完事了。對，沒毛病這樣的話也可以做，但是如果資料又多加了 很多 級分類呢 使用v for也能實現，但是 可能會比較雜或混亂！也不適合後期的維護，這個時候呢，我們就可以使用我們所說道的 ...
vue遞迴元件實現
需求 需要顯示不確定層級不確定值型別 可能是陣列裡有物件，物件裡有資料 的資料 資料結構如下 registered address registered address in full 241 rue jarry e montr al qu bec h2p1t6 canada industry co...