vue 如何使用遞歸組件
有的時候我們會使用二級標題，什么叫做二級標題？
先看看傳過來的數(shù)據(jù)。
類似于這種，數(shù)組中還有一個數(shù)組，有的人可能會說那就用兩個v-for嵌套使用啊，但是這里，我們想要它們是同樣的功能，同樣的樣式，所以使用遞歸組件是最好的選擇。
遞歸組件：在組件的自身再調(diào)用組件的自身。
組件一般要給個名字，方便我們使用遞歸組件的時候來使用，如果我自身有children，就把children當做list再傳給自己，做一個遞歸的循環(huán)。
此時就渲染出來了。
如果我再增加一個children呢？像這樣：
此時不用做任何事，只改變了數(shù)據(jù)結構，去看瀏覽器渲染的頁面：
三級標題就出來了，而我們只修改了數(shù)據(jù)結構，模板處沒有動任何地方。
這就是遞歸組件的使用，只要children存在，就調(diào)用自身。
如果用v-for來寫，可能還要寫一層循環(huán)。
tips 關于name的一些使用
每一個組件內(nèi)的name值到底是做什么用的呢？
1. 當我們做遞歸組件會用到 2.在頁面上想對某個頁面取消緩存，keep-alive exclude="xxname" 3.Vue的開發(fā)者調(diào)試工具，會顯示一個個組件名，取決于這個name
我目前所知大概就是這些用途了，以后發(fā)現(xiàn)了新的用途會再更新的。
以上就是vue 如何使用遞歸組件的詳細內(nèi)容，更多關于vue 使用遞歸組件的資料請關注腳本之家其它相關文章！
相關文章
Vue2 Vue-cli中使用Typescript的配置詳解
Vue作為前端三大框架之一截至到目前在github上以收獲44,873顆星，足以說明其以悄然成為主流。下面這篇文章主要給大家介紹了關于Vue2 Vue-cli中使用Typescript的配置的相關資料，需要的朋友可以參考下。2017-07-07
去除Element-Plus下拉菜單邊框的實現(xiàn)步驟
Element-Plus 是 Element UI 的 Vue 3 版本,它提供了一套完整的組件庫,在使用 Element-Plus 進行開發(fā)時,我們可能會遇到需要自定義組件樣式的情況,本文將介紹如何使用 CSS 來去除 Element-Plus 下拉框的邊框,需要的朋友可以參考下2024-03-03
vue中ref和$refs獲取元素dom、獲取子組件數(shù)據(jù)與方法調(diào)用示例
在Vue3中要獲取子組件的DOM節(jié)點,你可以使用ref來引用子組件,然后通過$refs來訪問子組件的DOM,下面這篇文章主要給大家介紹了關于vue中ref和$refs獲取元素dom、獲取子組件數(shù)據(jù)與方法調(diào)用的相關資料,需要的朋友可以參考下2024-07-07
在Vue中，computed屬性是一種計算屬性，它的值是根據(jù)其他數(shù)據(jù)的值動態(tài)計算出來的，下面小編主要來和大家聊聊Vue 3的組合式API中如何使用computed屬性，感興趣的小伙伴快跟隨小編一起了解一下吧2023-06-06
Vue 如何使用props、emit實現(xiàn)自定義雙向綁定的實現(xiàn)
這篇文章主要介紹了Vue 如何使用props、emit實現(xiàn)自定義雙向綁定的實現(xiàn)，文中通過示例代碼介紹的非常詳細，對大家的學習或者工作具有一定的參考學習價值，需要的朋友們下面隨著小編來一起學習學習吧2020-06-06
這篇文章主要為大家詳細介紹了vue使用nprogress實現(xiàn)進度條，文中示例代碼介紹的非常詳細，具有一定的參考價值，感興趣的小伙伴們可以參考一下2019-12-12
組件 (Component) 是 Vue.js 最強大的功能之一。組件可以擴展 HTML 元素，封裝可重用的代碼。這篇文章給大家介紹了vue組件的使用，需要的朋友參考下吧2018-01-01
這篇文章主要介紹了vue.js自定義組件directives的實例代碼，非常不錯，具有一定的參考借鑒價值,需要的朋友可以參考下2018-11-11
在本文中，將向你展示5個特性，你可以通過 Vuex 插件輕松地添加到下一個項目中。一起來學習下。2017-11-11
vue解決Not?allowed?to?load?local?resource問題的全過程
這篇文章主要給大家介紹了關于vue解決Not?allowed?to?load?local?resource問題的相關資料,文中通過圖文介紹的非常詳細,需要的朋友可以參考下2022-10-10