vue 如何使用遞迴元件
阿新 • • 發佈:2020-10-24
有的時候我們會使用二級標題,什麼叫做二級標題?
先看看傳過來的資料。
類似於這種,陣列中還有一個數組,有的人可能會說那就用兩個v-for巢狀使用啊,但是這裡,我們想要它們是同樣的功能,同樣的樣式,所以使用遞迴元件是最好的選擇。
遞迴元件:在元件的自身再呼叫元件的自身。
元件一般要給個名字,方便我們使用遞迴元件的時候來使用,如果我自身有children
,就把children
當做list
再傳給自己,做一個遞迴的迴圈。
此時就渲染出來了。
如果我再增加一個children
呢?像這樣:
此時不用做任何事,只改變了資料結構,去看瀏覽器渲染的頁面:
三級標題就出來了,而我們只修改了資料結構,模板處沒有動任何地方。
children
存在,就呼叫自身。如果用
v-for
來寫,可能還要寫一層迴圈。
tips 關於name的一些使用
每一個元件內的name
值到底是做什麼用的呢?
1. 當我們做遞迴元件會用到 2.在頁面上想對某個頁面取消快取,keep-alive exclude="xxname" 3.Vue的開發者除錯工具,會顯示一個個元件名,取決於這個name
我目前所知大概就是這些用途了,以後發現了新的用途會再更新的。
以上就是vue 如何使用遞迴元件的詳細內容,更多關於vue 使用遞迴元件的資料請關注我們其它相關文章!