10分钟了解Vue3递归组件的用法

更新时间：2022年03月09日 10:20:39 作者：德育处主任

递归简单来讲就是程序自己调用自身,vue中的递归组件就是,组件自身调用自身,下面这篇文章主要给大家介绍了关于Vue3递归组件的用法,需要的朋友可以参考下

前言

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

本文用10分钟左右的时间让你掌握 递归组件 的用法。

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

用法讲解

在讲解 递归组件 之前，我们需要先了解几个概念。

什么是递归？

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

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

你可以将递归粗略的理解为循环，只不过递归是调用自身。

在实际使用中，需要给递归设置一个边界条件，用该边界条件来判断是否继续递归下去。

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

什么是递归组件？

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

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

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

组件在边界条件内不断调用自己，直到超出边界条件为止。

递归组件在哪会用到？

在我工作中会出现递归组件的情况有：

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

上手实操

经过前面的讲解，相信大家对 递归组件 已经有一定的概念了。

接下来通过一个简单的例子来讲解。

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

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

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

所以可以理解为前端一开始不知道这个导航有多少层级。

这时就可以通过 递归组件 的方式来实现。

步骤如下：

创建导航组件
全局注册导航组件
获取数据（本例以学习为目的，所以在前端写死数据）
在导航组件中设置递归边界，并渲染数据

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>

总结

到此这篇关于Vue3递归组件的用法的文章就介绍到这了,更多相关Vue3递归组件用法内容请搜索脚本之家以前的文章或继续浏览下面的相关文章希望大家以后多多支持脚本之家！

您可能感兴趣的文章:

Vue在页面数据渲染完成之后的调用方法
今天小编就为大家分享一篇Vue在页面数据渲染完成之后的调用方法，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧
2018-09-09
vue全局过滤器概念及注意事项和基本使用方法
这篇文章主要给大家分享了vue全局过滤器概念及注意事项和基本使用方法，下面文字围绕vue全局过滤器的相关资料展开具体的详细内容,需要的朋友可以参考一下，希望对你有所帮助
2021-11-11
Vue中输入框仅支持数字输入的四种方法
项目中需要用到大量的数字输入框限制,为了可以以后能又更多的拓展性,下面这篇文章主要给大家介绍了关于Vue中输入框仅支持数字输入的四种方法,文中通过代码介绍的非常详细,需要的朋友可以参考下
2024-08-08
Vue中$set()的使用方法场景分析
由于 Vue 会在初始化实例时进行双向数据绑定，使用Object.defineProperty()对属性遍历添加 getter/setter 方法，所以属性必须在 data 对象上存在时才能进行上述过程，这样才能让它是响应的，这篇文章主要介绍了Vue中$set()的使用方法场景分析,需要的朋友可以参考下
2023-02-02
vue中路由跳转不计入history的操作
这篇文章主要介绍了vue中路由跳转不计入history的操作，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧
2020-09-09
Vue中computed与methods的区别详解
这篇文章主要介绍了Vue中computed与methods的区别详解，小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧
2018-03-03
解决vue.js中settimeout遇到的问题(时间参数短效果不稳定)
这篇文章主要介绍了解决vue.js中settimeout遇到的问题(时间参数短效果不稳定)，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧
2020-07-07
解决Vue.js应用回退或刷新界面时提示用户保存修改问题
这篇文章主要介绍了Vue.js应用回退或刷新界面时提示用户保存修改问题，本文通过两种手段防止运营编辑时丢失数据，具体内容详情，感兴趣的朋友跟随小编一起看看吧
2019-11-11
解决Vue运行项目报错proxy error: could not proxy request
这篇文章主要给大家介绍了关于如何解决Vue运行项目报错proxy error:could not proxy request的相关资料,Proxy Error指的是代理服务器无法正确处理请求的错误,需要的朋友可以参考下
2023-08-08
Vue 子组件与数据传递问题及注意事项
这篇文章主要介绍了Vue子组件与数据传递问题及需要注意事项，本文给大家介绍的非常详细，具有一定的参考借鉴价值,需要的朋友可以参考下
2019-07-07