文章詳情頁
vue 如何使用遞歸組件
瀏覽:174日期:2022-11-13 17:33:39
有的時候我們會使用二級標題,什么叫做二級標題?先看看傳過來的數據。類似于這種,數組中還有一個數組,有的人可能會說那就用兩個v-for嵌套使用啊,但是這里,我們想要它們是同樣的功能,同樣的樣式,所以使用遞歸組件是最好的選擇。
遞歸組件:在組件的自身再調用組件的自身。

組件一般要給個名字,方便我們使用遞歸組件的時候來使用,如果我自身有children,就把children當做list再傳給自己,做一個遞歸的循環。

此時就渲染出來了。

如果我再增加一個children呢?像這樣:

此時不用做任何事,只改變了數據結構,去看瀏覽器渲染的頁面:

三級標題就出來了,而我們只修改了數據結構,模板處沒有動任何地方。這就是遞歸組件的使用,只要children存在,就調用自身。如果用v-for來寫,可能還要寫一層循環。
tips 關于name的一些使用
每一個組件內的name值到底是做什么用的呢?
1. 當我們做遞歸組件會用到2.在頁面上想對某個頁面取消緩存,keep-alive exclude='xxname'3.Vue的開發者調試工具,會顯示一個個組件名,取決于這個name
我目前所知大概就是這些用途了,以后發現了新的用途會再更新的。
以上就是vue 如何使用遞歸組件的詳細內容,更多關于vue 使用遞歸組件的資料請關注好吧啦網其它相關文章!
標簽:
Vue
相關文章:
1. 詳解Android studio 動態fragment的用法2. 基于android studio的layout的xml文件的創建方式3. 編程語言PHP在Web開發領域的優勢在哪?4. 解決Android studio xml界面無法預覽問題5. 什么是python的自省6. Spring Boot和Thymeleaf整合結合JPA實現分頁效果(實例代碼)7. 圖文詳解vue中proto文件的函數調用8. Android如何加載Base64編碼格式圖片9. Springboot Druid 自定義加密數據庫密碼的幾種方案10. Vue封裝一個TodoList的案例與瀏覽器本地緩存的應用實現
排行榜

網公網安備