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é)
到此這篇關于Vue3遞歸組件的用法的文章就介紹到這了,更多相關Vue3遞歸組件用法內(nèi)容請搜索腳本之家以前的文章或繼續(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跨域問題,本文給大家介紹的非常詳細，具有一定的參考借鑒價值，需要的朋友可以參考下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，本文通過實例代碼給大家介紹的非常詳細，具有一定的參考借鑒價值,需要的朋友可以參考下2020-02-02
Vue中computed、methods與watch的區(qū)別總結(jié)
這篇文章主要給大家介紹了關于Vue中computed、methods與watch區(qū)別的相關資料，文中通過示例代碼介紹的非常詳細，對大家學習或者使用Vue具有一定的參考學習價值，需要的朋友們下面來一起學習學習吧2019-04-04
自定義指令是vue中使用頻率僅次于組件，其包含bind、inserted、update、componentUpdated、unbind五個生命周期鉤子。本文將對vue指令的工作原理進行相應介紹2021-06-06
這篇文章主要為大家詳細介紹了Vue3和Vite的那些事，文中示例代碼介紹的非常詳細，具有一定的參考價值，感興趣的小伙伴們可以參考一下，希望能夠給你帶來幫助2022-02-02