关于前端:Vue3递归组件

本文简介

点赞 + 关注 + 珍藏 = 学会了

在日常 Vue 我的项目中，大概率会用组件库辅助开发，所以 递归组件 的出镜率可能不会十分高。但这并不代表 递归组件 不重要。

本文用 10 分钟左右的工夫让你把握 递归组件 的用法。

在此之前，你必须把握：html + css + js + Vue3 根底用法，至多须要晓得 Vue 组件 是什么。

用法解说

在解说 递归组件 之前，咱们须要先理解几个概念。

什么是递归？

递归在百度百科里的定义是：

程序调用本身的编程技巧称为 递归（recursion）

你能够将 递归 粗略的了解为 循环 ，只不过 递归 是调用本身。

在理论应用中，须要给递归设置一个边界条件，用该边界条件来判断是否持续递归上来。

如果不设置判断条件，将会导致 有限递归 ，也就是 死循环！

什么是递归组件？

看到这里，我置信大家是晓得 Vue 组件 是什么。

我先把《Vue3 递归组件 文档》放在这。

其实 递归组件 就是把“递归”和“组件”联合起来。

组件在边界条件内一直调用本人，直到超出边界条件为止。

递归组件在哪会用到？

在我工作中会呈现递归组件的状况有：

• “树”组件：用来展现文件层级的。
• 左侧导航栏：依据路由层级生成的导航菜单。
• 多级表格（嵌套的表格）。

上手实操

通过后面的解说，置信大家对 递归组件 曾经有肯定的概念了。

接下来通过一个简略的例子来解说。

上图就是本次要实现的例子。

我没有写款式，大家将就一下，用想象力把这设想成网站的左侧导航栏吧。

这种导航栏，有在前端写死的；也有写业务是须要后端配置，前端把导航栏数据申请回来再生成路由的。

所以能够了解为前端一开始不晓得这个导航有多少层级。

这时就能够通过 递归组件 的形式来实现。

步骤如下：

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>

此时浏览器的界面如上图所示。

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 代码里。

到这就实现了最开始的指标了。

残缺代码

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 也能插图》

如果本文对你有帮忙，也心愿你能够 点赞 关注 珍藏 ~ 这对我很有用 ~
点赞 + 关注 + 珍藏 = 学会了