有的時(shí)候我們會(huì)使用二級(jí)標(biāo)題,什么叫做二級(jí)標(biāo)題玻褪?
先看看傳過(guò)來(lái)的數(shù)據(jù)。
類似于這種公荧,數(shù)組中還有一個(gè)數(shù)組带射,有的人可能會(huì)說(shuō)那就用兩個(gè)v-for
嵌套使用啊,但是這里循狰,我們想要它們是同樣的功能庸诱,同樣的樣式,所以使用遞歸組件是最好的選擇晤揣。
遞歸組件:在組件的自身再調(diào)用組件的自身。
數(shù)據(jù)結(jié)構(gòu)
組件一般要給個(gè)名字朱灿,方便我們使用遞歸組件的時(shí)候來(lái)使用昧识,如果我自身有children
,就把children
當(dāng)做list
再傳給自己盗扒,做一個(gè)遞歸的循環(huán)跪楞。
注意組件名稱
此時(shí)就渲染出來(lái)了缀去。
渲染出來(lái)啦
如果我再增加一個(gè)children
呢?像這樣:
數(shù)據(jù)結(jié)構(gòu)
此時(shí)不用做任何事甸祭,只改變了數(shù)據(jù)結(jié)構(gòu)缕碎,去看瀏覽器渲染的頁(yè)面:
已經(jīng)渲染出來(lái)了
三級(jí)標(biāo)題就出來(lái)了,而我們只修改了數(shù)據(jù)結(jié)構(gòu)池户,模板處沒(méi)有動(dòng)任何地方咏雌。
這就是遞歸組件的使用,只要children
存在校焦,就調(diào)用自身赊抖。
如果用v-for
來(lái)寫,可能還要寫一層循環(huán)寨典。
tips 關(guān)于name的一些使用
每一個(gè)組件內(nèi)的name
值到底是做什么用的呢氛雪?
1. 當(dāng)我們做遞歸組件會(huì)用到
2.在頁(yè)面上想對(duì)某個(gè)頁(yè)面取消緩存,keep-alive exclude="xxname"
3.Vue的開(kāi)發(fā)者調(diào)試工具耸成,會(huì)顯示一個(gè)個(gè)組件名报亩,取決于這個(gè)name
我目前所知大概就是這些用途了,以后發(fā)現(xiàn)了新的用途會(huì)再更新的井氢。