本文簡介

點贊 + 關注 + 收藏 = 學會了

在日常 Vue 項目中，大概率會用組件庫輔助開發，所以 遞歸組件 的出鏡率可能不會非常高。但這并不代表 遞歸組件 不重要。

本文用10分鐘左右的時間讓你掌握 遞歸組件 的用法。

在此之前，你必須掌握：html + css + js + Vue3 基礎用法，至少需要知道 Vue 組件 是什么。

用法講解

在講解 遞歸組件 之前，我們需要先了解幾個概念。

什么是遞歸？

遞歸在百度百科里的定義是：

程序調用自身的編程技巧稱為遞歸（ recursion）

你可以將 遞歸 粗略的理解為 循環 ，只不過 遞歸 是調用自身。

在實際使用中，需要給遞歸設置一個邊界條件，用該邊界條件來判斷是否繼續遞歸下去。

如果不設置判斷條件，將會導致 無限遞歸 ，也就是 死循環！

什么是遞歸組件？

看到這里，我相信大家是知道 Vue組件 是什么。

我先把 《Vue3 遞歸組件 文檔》 放在這。

其實 遞歸組件 就是把 “遞歸” 和 “組件” 結合起來。

組件在邊界條件內不斷調用自己，直到超出邊界條件為止。

遞歸組件在哪會用到？

在我工作中會出現遞歸組件的情況有：

• “樹”組件：用來展示文件層級的。
• 左側導航欄：根據路由層級生成的導航菜單。
• 多級表格（嵌套的表格）。

上手實操

經過前面的講解，相信大家對 遞歸組件 已經有一定的概念了。

接下來通過一個簡單的例子來講解。

001.png

上圖就是本次要實現的例子。

我沒有寫樣式，大家將就一下，用想象力把這想象成網站的左側導航欄吧。

這種導航欄，有在前端寫死的；也有寫業務是需要后端配置，前端把導航欄數據請求回來再生成路由的。

所以可以理解為前端一開始不知道這個導航有多少層級。

這時就可以通過 遞歸組件 的方式來實現。

步驟如下：

1. 創建導航組件
2. 全局注冊導航組件
3. 獲取數據（本例以學習為目的，所以在前端寫死數據）
4. 在導航組件中設置遞歸邊界，并渲染數據

1、創建組件

我給導航組件命名為 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 自己調用自己了。

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>

002.png

此時瀏覽器的界面如上圖所示。

3、獲取導航數據

在真實項目中，左側導航可能是從后端獲取的。

但本文的目的是學習遞歸組件，所以就直接在前端模擬了一份 “請求回來的數據”。

我把 “請求數據” 的操作放在 App.vue 。然后再通過 props 的方式傳入到 RootNav.vue 組件內。

講到 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 里就接收到 “請求回來的導航數據” 了。

4、設置遞歸邊界，并渲染數據

我們看到導航數據有 children 字段，這個字段是 “子菜單” 的意思。

我們可以通過是否存在 children 字段來判斷是否需要繼續遞歸。也就是說，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 代碼里。

到這就完成了最開始的目標了。

001.png

完整代碼

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>

推薦閱讀

??《執行vue create時到底做了什么》

??《Vue3 過10種組件通訊方式》

??《Vite 搭建 Vue2 項目（Vue2 + vue-router + vuex）》

??《console.log也能插圖》

如果本文對你有幫助，也希望你可以 點贊 關注 收藏 ~ 這對我很有用 ~