10分鐘了解Vue3遞歸組件的用法
前言
在日常 Vue 項目中，大概率會用組件庫輔助開發(fā)，所以 遞歸組件 的出鏡率可能不會非常高。但這并不代表 遞歸組件 不重要。
本文用10分鐘左右的時間讓你掌握 遞歸組件 的用法。
在此之前，你必須掌握：html + css + js + Vue3 基礎用法，至少需要知道 Vue 組件 是什么。
用法講解
在講解 遞歸組件 之前，我們需要先了解幾個概念。
什么是遞歸？
遞歸在百度百科里的定義是：
程序調(diào)用自身的編程技巧稱為遞歸（ recursion）
你可以將 遞歸 粗略的理解為 循環(huán) ，只不過 遞歸 是調(diào)用自身。
在實際使用中，需要給遞歸設置一個邊界條件，用該邊界條件來判斷是否繼續(xù)遞歸下去。
如果不設置判斷條件，將會導致 無限遞歸 ，也就是 死循環(huán)！
什么是遞歸組件？
看到這里，我相信大家是知道 Vue組件 是什么。
我先把 《Vue3 遞歸組件 文檔》 放在這。
其實 遞歸組件 就是把 “遞歸” 和 “組件” 結(jié)合起來。
組件在邊界條件內(nèi)不斷調(diào)用自己，直到超出邊界條件為止。
遞歸組件在哪會用到？
在我工作中會出現(xiàn)遞歸組件的情況有：
- “樹”組件：用來展示文件層級的。
- 左側(cè)導航欄：根據(jù)路由層級生成的導航菜單。
- 多級表格（嵌套的表格）。
上手實操
經(jīng)過前面的講解，相信大家對 遞歸組件 已經(jīng)有一定的概念了。
接下來通過一個簡單的例子來講解。
上圖就是本次要實現(xiàn)的例子。
我沒有寫樣式，大家將就一下，用想象力把這想象成網(wǎng)站的左側(cè)導航欄吧。
這種導航欄，有在前端寫死的；也有寫業(yè)務是需要后端配置，前端把導航欄數(shù)據(jù)請求回來再生成路由的。
所以可以理解為前端一開始不知道這個導航有多少層級。
這時就可以通過 遞歸組件 的方式來實現(xiàn)。
步驟如下：
- 創(chuàng)建導航組件
- 全局注冊導航組件
- 獲取數(shù)據(jù)（本例以學習為目的，所以在前端寫死數(shù)據(jù)）
- 在導航組件中設置遞歸邊界，并渲染數(shù)據(jù)
1、創(chuàng)建組件
我給導航組件命名為 RootNav.vue 。并將它放在 components 目錄下。
RootNav.vue
<template>
<div>
Rootnav
</div>
</template>
<script setup>
</script>
<style lang="scss" scoped>
</style>此時項目目錄如下：
省略部分目錄和文件 - src |- main.js |- App.vue |- components |- RootNav.vue
2、全局注冊組件
我在全局注冊 RootNav.vue 組件，這樣就方便 RootNav.vue 自己調(diào)用自己了。
main.js
import { createApp } from 'vue'
import App from './App.vue'
import RootNav from './components/RootNav.vue' // 引入 RootNav 組件
const app = createApp(App)
app.component('RootNav', RootNav) // 將 RootNav 注冊成全局組件
app.mount('#app')在 App.vue 中使用
App.vue
<template>
<div>
<RootNav />
</div>
</template>
此時瀏覽器的界面如上圖所示。
3、獲取導航數(shù)據(jù)
在真實項目中，左側(cè)導航可能是從后端獲取的。
但本文的目的是學習遞歸組件，所以就直接在前端模擬了一份 “請求回來的數(shù)據(jù)”。
我把 “請求數(shù)據(jù)” 的操作放在 App.vue 。然后再通過 props 的方式傳入到 RootNav.vue 組件內(nèi)。
講到 props 我就順便提一下：《Vue3 過10種組件通訊方式》
App.vue
<template>
<div>
<RootNav :list="navList" />
</div>
</template>
<script setup>
const navList = [
{
name: '一級導航 1'
},
{
name: '一級導航 2',
children: [
{ name: '二級導航 2-1' },
{
name: '二級導航 2-2',
children: [
{ name: '三級導航 2-2-1' },
{ name: '三級導航 2-2-2' },
]
},
{ name: '二級導航 2-2' }
]
},
{
name: '一級導航 3'
}
]
</script>RootNav.vue
<template>
<div>
RootNav
</div>
</template>
<script setup>
const props = defineProps({
list: {
type: Array,
default: () => []
}
})
</script>此時在 RootNav.vue 里就接收到 “請求回來的導航數(shù)據(jù)” 了。
4、設置遞歸邊界，并渲染數(shù)據(jù)
我們看到導航數(shù)據(jù)有 children 字段，這個字段是 “子菜單” 的意思。
我們可以通過是否存在 children 字段來判斷是否需要繼續(xù)遞歸。也就是說，children 就是遞歸的邊界條件。
RootNav.vue
<template>
<ul>
<template v-for="item in list">
<li>{{ item.name }}</li>
<RootNav v-if="'children' in item" :list="item.children" />
</template>
</ul>
</template>
<script setup>
const props = defineProps({
list: {
type: Array,
default: () => []
}
})
</script>這部分的重點在 HTML 代碼里。
到這就完成了最開始的目標了。
完整代碼
main.js
import { createApp } from 'vue'
import App from './App.vue'
import RootNav from './components/RootNav.vue'
const app = createApp(App)
app.component('RootNav', RootNav)
app.mount('#app')App.vue
<template>
<div>
<RootNav :list="navList" />
</div>
</template>
<script setup>
const navList = [
{
name: '一級導航 1'
},
{
name: '一級導航 2',
children: [
{ name: '二級導航 2-1' },
{
name: '二級導航 2-2',
children: [
{ name: '三級導航 2-2-1' },
{ name: '三級導航 2-2-2' },
]
},
{ name: '二級導航 2-2' }
]
},
{
name: '一級導航 3'
}
]
</script>components/RootNav.vue
<template>
<ul>
<template v-for="item in list">
<li>{{ item.name }}</li>
<RootNav v-if="'children' in item" :list="item.children" />
</template>
</ul>
</template>
<script setup>
const props = defineProps({
list: {
type: Array,
default: () => []
}
})
</script>總結(jié)
到此這篇關(guān)于Vue3遞歸組件的用法的文章就介紹到這了,更多相關(guān)Vue3遞歸組件用法內(nèi)容請搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！
相關(guān)文章
Vue在頁面數(shù)據(jù)渲染完成之后的調(diào)用方法
今天小編就為大家分享一篇Vue在頁面數(shù)據(jù)渲染完成之后的調(diào)用方法，具有很好的參考價值，希望對大家有所幫助。一起跟隨小編過來看看吧2018-09-09
這篇文章主要給大家分享了vue全局過濾器概念及注意事項和基本使用方法，下面文字圍繞vue全局過濾器的相關(guān)資料展開具體的詳細內(nèi)容,需要的朋友可以參考一下，希望對你有所幫助2021-11-11
項目中需要用到大量的數(shù)字輸入框限制,為了可以以后能又更多的拓展性,下面這篇文章主要給大家介紹了關(guān)于Vue中輸入框僅支持數(shù)字輸入的四種方法,文中通過代碼介紹的非常詳細,需要的朋友可以參考下2024-08-08
由于 Vue 會在初始化實例時進行雙向數(shù)據(jù)綁定，使用Object.defineProperty()對屬性遍歷添加 getter/setter 方法，所以屬性必須在 data 對象上存在時才能進行上述過程 ，這樣才能讓它是響應的，這篇文章主要介紹了Vue中$set()的使用方法場景分析,需要的朋友可以參考下2023-02-02
這篇文章主要介紹了vue中路由跳轉(zhuǎn)不計入history的操作，具有很好的參考價值，希望對大家有所幫助。一起跟隨小編過來看看吧2020-09-09
這篇文章主要介紹了Vue中computed與methods的區(qū)別詳解，小編覺得挺不錯的，現(xiàn)在分享給大家，也給大家做個參考。一起跟隨小編過來看看吧2018-03-03
解決vue.js中settimeout遇到的問題(時間參數(shù)短效果不穩(wěn)定)
這篇文章主要介紹了解決vue.js中settimeout遇到的問題(時間參數(shù)短效果不穩(wěn)定)，具有很好的參考價值，希望對大家有所幫助。一起跟隨小編過來看看吧2020-07-07
這篇文章主要介紹了Vue.js應用回退或刷新界面時提示用戶保存修改問題，本文通過兩種手段防止運營編輯時丟失數(shù)據(jù)，具體內(nèi)容詳情，感興趣的朋友跟隨小編一起看看吧2019-11-11
解決Vue運行項目報錯proxy?error:?could?not?proxy?request
這篇文章主要給大家介紹了關(guān)于如何解決Vue運行項目報錯proxy?error:could?not?proxy?request的相關(guān)資料,Proxy Error指的是代理服務器無法正確處理請求的錯誤,需要的朋友可以參考下2023-08-08
這篇文章主要介紹了Vue子組件與數(shù)據(jù)傳遞問題及需要注意事項，本文給大家介紹的非常詳細，具有一定的參考借鑒價值,需要的朋友可以參考下2019-07-07