10分鐘了解Vue3遞歸組件的用法
前言
在日常 Vue 項目中，大概率會用組件庫輔助開發(fā)，所以 遞歸組件 的出鏡率可能不會非常高。但這并不代表 遞歸組件 不重要。
本文用10分鐘左右的時間讓你掌握 遞歸組件 的用法。
在此之前，你必須掌握：html + css + js + Vue3 基礎(chǔ)用法，至少需要知道 Vue 組件 是什么。
用法講解
在講解 遞歸組件 之前，我們需要先了解幾個概念。
什么是遞歸？
遞歸在百度百科里的定義是：
程序調(diào)用自身的編程技巧稱為遞歸（ recursion）
你可以將 遞歸 粗略的理解為 循環(huán) ，只不過 遞歸 是調(diào)用自身。
在實際使用中，需要給遞歸設(shè)置一個邊界條件，用該邊界條件來判斷是否繼續(xù)遞歸下去。
如果不設(shè)置判斷條件，將會導(dǎo)致 無限遞歸 ，也就是 死循環(huán)！
什么是遞歸組件？
看到這里，我相信大家是知道 Vue組件 是什么。
我先把 《Vue3 遞歸組件 文檔》 放在這。
其實 遞歸組件 就是把 “遞歸” 和 “組件” 結(jié)合起來。
組件在邊界條件內(nèi)不斷調(diào)用自己，直到超出邊界條件為止。
遞歸組件在哪會用到？
在我工作中會出現(xiàn)遞歸組件的情況有：
- “樹”組件：用來展示文件層級的。
- 左側(cè)導(dǎo)航欄：根據(jù)路由層級生成的導(dǎo)航菜單。
- 多級表格（嵌套的表格）。
上手實操
經(jīng)過前面的講解，相信大家對 遞歸組件 已經(jīng)有一定的概念了。
接下來通過一個簡單的例子來講解。
上圖就是本次要實現(xiàn)的例子。
我沒有寫樣式，大家將就一下，用想象力把這想象成網(wǎng)站的左側(cè)導(dǎo)航欄吧。
這種導(dǎo)航欄，有在前端寫死的；也有寫業(yè)務(wù)是需要后端配置，前端把導(dǎo)航欄數(shù)據(jù)請求回來再生成路由的。
所以可以理解為前端一開始不知道這個導(dǎo)航有多少層級。
這時就可以通過 遞歸組件 的方式來實現(xiàn)。
步驟如下：
- 創(chuàng)建導(dǎo)航組件
- 全局注冊導(dǎo)航組件
- 獲取數(shù)據(jù)（本例以學(xué)習(xí)為目的，所以在前端寫死數(shù)據(jù)）
- 在導(dǎo)航組件中設(shè)置遞歸邊界，并渲染數(shù)據(jù)
1、創(chuàng)建組件
我給導(dǎo)航組件命名為 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、獲取導(dǎo)航數(shù)據(jù)
在真實項目中，左側(cè)導(dǎo)航可能是從后端獲取的。
但本文的目的是學(xué)習(xí)遞歸組件，所以就直接在前端模擬了一份 “請求回來的數(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: '一級導(dǎo)航 1'
},
{
name: '一級導(dǎo)航 2',
children: [
{ name: '二級導(dǎo)航 2-1' },
{
name: '二級導(dǎo)航 2-2',
children: [
{ name: '三級導(dǎo)航 2-2-1' },
{ name: '三級導(dǎo)航 2-2-2' },
]
},
{ name: '二級導(dǎo)航 2-2' }
]
},
{
name: '一級導(dǎo)航 3'
}
]
</script>RootNav.vue
<template>
<div>
RootNav
</div>
</template>
<script setup>
const props = defineProps({
list: {
type: Array,
default: () => []
}
})
</script>此時在 RootNav.vue 里就接收到 “請求回來的導(dǎo)航數(shù)據(jù)” 了。
4、設(shè)置遞歸邊界，并渲染數(shù)據(jù)
我們看到導(dǎo)航數(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 代碼里。
到這就完成了最開始的目標(biāo)了。
完整代碼
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: '一級導(dǎo)航 1'
},
{
name: '一級導(dǎo)航 2',
children: [
{ name: '二級導(dǎo)航 2-1' },
{
name: '二級導(dǎo)航 2-2',
children: [
{ name: '三級導(dǎo)航 2-2-1' },
{ name: '三級導(dǎo)航 2-2-2' },
]
},
{ name: '二級導(dǎo)航 2-2' }
]
},
{
name: '一級導(dǎo)航 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)文章
這篇文章主要為大家詳細(xì)介紹了vue.js指令v-model實現(xiàn)方法,具有一定的參考價值，感興趣的小伙伴們可以參考一下2016-12-12
Luckysheet ，一款純前端類似excel的在線表格，功能強大、配置簡單、完全開源，這篇文章主要介紹了Vue-Luckysheet的使用方法,需要的朋友可以參考下2022-08-08
這篇文章主要介紹了Vue開發(fā)實現(xiàn)吸頂效果的示例代碼，小編覺得挺不錯的，現(xiàn)在分享給大家，也給大家做個參考。一起跟隨小編過來看看吧2018-08-08
解決Vue調(diào)用springboot接口403跨域問題
這篇文章主要介紹了解決Vue調(diào)用springboot接口403跨域問題,本文給大家介紹的非常詳細(xì)，具有一定的參考借鑒價值，需要的朋友可以參考下2019-09-09
大家在vue中，經(jīng)常會用到數(shù)據(jù)請求問題，常用的有vue-resourse、axios ，今天小編給大家介紹下axios的post請求 ，感興趣的朋友跟隨腳本之家小編一起看看吧2018-04-04
vue2更改data里的變量不生效時,深層更改data里的變量問題
這篇文章主要介紹了vue2更改data里的變量不生效時,深層更改data里的變量問題,具有很好的參考價值,希望對大家有所幫助,如有錯誤或未考慮完全的地方,望不吝賜教2024-03-03
這篇文章主要介紹了vue 翻頁組件vue-flip-page，本文通過實例代碼給大家介紹的非常詳細(xì)，具有一定的參考借鑒價值,需要的朋友可以參考下2020-02-02
Vue中computed、methods與watch的區(qū)別總結(jié)
這篇文章主要給大家介紹了關(guān)于Vue中computed、methods與watch區(qū)別的相關(guān)資料，文中通過示例代碼介紹的非常詳細(xì)，對大家學(xué)習(xí)或者使用Vue具有一定的參考學(xué)習(xí)價值，需要的朋友們下面來一起學(xué)習(xí)學(xué)習(xí)吧2019-04-04
自定義指令是vue中使用頻率僅次于組件，其包含bind、inserted、update、componentUpdated、unbind五個生命周期鉤子。本文將對vue指令的工作原理進(jìn)行相應(yīng)介紹2021-06-06
這篇文章主要為大家詳細(xì)介紹了Vue3和Vite的那些事，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價值，感興趣的小伙伴們可以參考一下，希望能夠給你帶來幫助2022-02-02