vue 如何使用遞歸組件
有的時(shí)候我們會(huì)使用二級(jí)標(biāo)題,什么叫做二級(jí)標(biāo)題?先看看傳過(guò)來(lái)的數(shù)據(jù)。類似于這種,數(shù)組中還有一個(gè)數(shù)組,有的人可能會(huì)說(shuō)那就用兩個(gè)v-for嵌套使用啊,但是這里,我們想要它們是同樣的功能,同樣的樣式,所以使用遞歸組件是最好的選擇。
遞歸組件:在組件的自身再調(diào)用組件的自身。

組件一般要給個(gè)名字,方便我們使用遞歸組件的時(shí)候來(lái)使用,如果我自身有children,就把children當(dāng)做list再傳給自己,做一個(gè)遞歸的循環(huán)。

此時(shí)就渲染出來(lái)了。

如果我再增加一個(gè)children呢?像這樣:

此時(shí)不用做任何事,只改變了數(shù)據(jù)結(jié)構(gòu),去看瀏覽器渲染的頁(yè)面:

三級(jí)標(biāo)題就出來(lái)了,而我們只修改了數(shù)據(jù)結(jié)構(gòu),模板處沒(méi)有動(dòng)任何地方。這就是遞歸組件的使用,只要children存在,就調(diào)用自身。如果用v-for來(lái)寫(xiě),可能還要寫(xiě)一層循環(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ì)再更新的。
以上就是vue 如何使用遞歸組件的詳細(xì)內(nèi)容,更多關(guān)于vue 使用遞歸組件的資料請(qǐng)關(guān)注好吧啦網(wǎng)其它相關(guān)文章!
相關(guān)文章:
1. Python基于requests庫(kù)爬取網(wǎng)站信息2. vscode運(yùn)行php報(bào)錯(cuò)php?not?found解決辦法3. Python使用Selenium自動(dòng)進(jìn)行百度搜索的實(shí)現(xiàn)4. Java commons-httpclient如果實(shí)現(xiàn)get及post請(qǐng)求5. 一文帶你徹底理解Java序列化和反序列化6. 微信小程序?qū)崿F(xiàn)商品分類頁(yè)過(guò)程結(jié)束7. PHP laravel實(shí)現(xiàn)導(dǎo)出PDF功能8. JS中6個(gè)對(duì)象數(shù)組去重的方法9. 資深程序員:給Python軟件開(kāi)發(fā)測(cè)試的25個(gè)忠告!10. python中文本字符處理的簡(jiǎn)單方法記錄

網(wǎng)公網(wǎng)安備