当前位置: 首页 > news >正文

【vue】13.深入理解递归组件

在Vue.js的开发实践中,组件是构建界面的核心概念。而递归组件则是一种特殊的组件,它能够自己调用自己,从而创造出无限嵌套的界面结构。本文将带你了解递归组件的应用,以及如何在Vue中实现和使用它。


一.什么是递归组件?

递归组件是指在一个组件的模板中直接或间接地调用自身。这种组件常用于构建具有层级结构的数据,如树形控件、菜单、评论系统等。递归组件的关键在于它有一个终止条件,以防止无限循环调用。


二.递归组件的应用场景

1. 树形控件

树形控件是递归组件的经典应用场景。例如,在一个文件浏览器的UI中,每个文件夹都可以包含子文件夹,这种结构就非常适合使用递归组件来实现。

2. 菜单导航

复杂的菜单导航系统往往具有多级菜单项,递归组件可以轻松处理这种层级关系,使得菜单结构清晰且易于维护。

3. 评论系统

在评论系统中,用户可以回复其他用户的评论,形成嵌套的回复结构。递归组件可以用来展示这种层级化的评论列表。


三.如何实现递归组件

本文将用几个简单的递归组件示例来帮助你理解递归组件。

在下列例子中,递归组件的名称都被明确指定为name属性,这是Vue中递归组件的一个要求。组件通过检查传入的属性(如departmentsfolderscommentsmenuItemscategories)来确定是否需要继续递归。如果该属性存在且包含数据,组件就会再次渲染自身,否则递归终止

1. 组织结构树

一个组织结构的数据,每个部门可能包含多个子部门。

<template><ul><li v-for="department in departments" :key="department.id">{{ department.name }}<org-structure v-if="department.subDepartments" :departments="department.subDepartments"></org-structure></li></ul>
</template><script>
export default {name: 'OrgStructure',props: {departments: Array}
}
</script>

2. 文件夹结构

展示文件夹和子文件夹的层次结构。

<template><ul><li v-for="folder in folders" :key="folder.id"><span>{{ folder.name }}</span><folder-structure v-if="folder.subFolders" :folders="folder.subFolders"></folder-structure></li></ul>
</template><script>
export default {name: 'FolderStructure',props: {folders: Array}
}
</script>

3. 评论嵌套

实现一个评论系统,其中评论可以嵌套回复。

<template><div class="comment" v-for="comment in comments" :key="comment.id"><p>{{ comment.content }}</p><nested-comments v-if="comment.replies" :comments="comment.replies"></nested-comments></div>
</template><script>
export default {name: 'NestedComments',props: {comments: Array}
}
</script>

4. 菜单导航

递归组件来展示多级菜单。

<template><ul><li v-for="menuItem in menuItems" :key="menuItem.id"><a href="#">{{ menuItem.name }}</a><nested-menu v-if="menuItem.children" :menu-items="menuItem.children"></nested-menu></li></ul>
</template><script>
export default {name: 'NestedMenu',props: {menuItems: Array}
}
</script>

5. 分类层级

展示产品分类及其子分类。

<template><div class="category" v-for="category in categories" :key="category.id"><h3>{{ category.name }}</h3><nested-categories v-if="category.children" :categories="category.children"></nested-categories></div>
</template><script>
export default {name: 'NestedCategories',props: {categories: Array}
}
</script>

注意事项

  • 递归终止条件:确保递归组件有一个明确的终止条件,以防止无限循环。
  • 组件命名:递归组件必须给自己一个名字,否则在模板中无法正确地调用自身。
  • 性能考虑:递归组件可能会处理大量的数据,需要注意性能问题,避免不必要的渲染。

四.递归组件的终止条件

递归组件的终止条件是递归算法中至关重要的部分,它确保了递归过程能够正确地停止,防止无限循环的发生。在Vue中设置递归组件的终止条件通常有以下几种方法:

1. 基于数据属性

最常见的方法是基于数据中的一个属性来判断是否应该停止递归。例如,在树形结构中,通常每个节点会有一个children属性,如果该属性不存在或为空数组,则表示没有子节点,递归应当停止。

<template><ul><li v-for="item in items" :key="item.id">{{ item.name }}<!-- 终止条件:如果没有子项,则不递归 --><tree-node v-if="item.children && item.children.length" :items="item.children"></tree-node></li></ul>
</template><script>
export default {name: 'TreeNode', // 组件名是递归引用的关键props: {items: Array}
}
</script>

在这个例子中,v-if="item.children && item.children.length"就是递归的终止条件。只有当item.children存在并且它包含至少一个元素时,TreeNode组件才会再次被渲染。

2. 基于深度限制

在某些情况下,我们希望限制递归的深度,即使数据中仍有子项,也不继续递归。这时可以传递一个深度参数并在递归时递减。

<template><ul><li v-for="item in items" :key="item.id">{{ item.name }}<!-- 终止条件:如果达到最大深度,则不递归 --><tree-node v-if="depth > 0" :items="item.children" :depth="depth - 1"></tree-node></li></ul>
</template><script>
export default {name: 'TreeNode',props: {items: Array,depth: {type: Number,default: 1 // 默认深度为1}}
}
</script>

在这个例子中,:depth="depth - 1"确保了每次递归时深度都会减一,当深度降到0或以下时,递归将停止。

3. 基于其他逻辑条件

有时,递归的终止条件可能基于更复杂的业务逻辑。例如,只希望递归到特定的类型或状态,这时可以在组件中添加相应的逻辑判断。

<template><ul><li v-for="item in items" :key="item.id">{{ item.name }}<!-- 终止条件:基于业务逻辑 --><tree-node v-if="shouldRecurse(item)" :items="item.children"></tree-node></li></ul>
</template><script>
export default {name: 'TreeNode',props: {items: Array},methods: {shouldRecurse(item) {// 基于业务逻辑判断是否继续递归return item.type !== 'terminal' && item.children && item.children.length;}}
}
</script>

在这个例子中,shouldRecurse方法是一个业务逻辑函数,它决定了是否应该继续递归。


五.结语

递归组件是Vue.js强大功能之一,它为处理层级和嵌套数据提供了优雅的解决方案。通过理解和掌握递归组件的应用,我们可以构建出更加复杂和灵活的界面。在实际项目中,合理使用递归组件不仅可以提升开发效率,还能让代码更加简洁和易于维护。

相关文章:

【vue】13.深入理解递归组件

在Vue.js的开发实践中&#xff0c;组件是构建界面的核心概念。而递归组件则是一种特殊的组件&#xff0c;它能够自己调用自己&#xff0c;从而创造出无限嵌套的界面结构。本文将带你了解递归组件的应用&#xff0c;以及如何在Vue中实现和使用它。 一.什么是递归组件&#xff1f…...

【OFDM】OFDM Radar Algorithms in Mobile Communication Networks

[1] Maximum Likelihood Speed and Distance Estimation for OFDM Radar 1-CRB估计 1-初步形式 首先单频信号频率估计的CRB,也就是原文Eq.(3.53) v a r [ ω ^ ] ≥ 6 σ N 2 ( N 2 − 1 ) N \mathrm{var}[\hat{\omega}]\geq\frac{6\sigma_N^2}{(N^2-1)N} var[ω^]≥(N2−…...

如何检测java中的内存泄露及溢出,并预防?

引言 在Java开发中,内存管理是一个至关重要的方面。尽管Java有垃圾回收机制,但开发者仍然需要关注内存泄漏和溢出的问题。 内存泄漏会导致应用程序的性能下降,甚至崩溃,而内存溢出则会导致Java虚拟机(JVM)抛出OutOfMemoryError异常。 本文将探讨如何检测Java项目中的内…...

kafka 如何减少数据丢失?

大家好&#xff0c;我是锋哥。今天分享关于【kafka 如何减少数据丢失?】面试题&#xff1f;希望对大家有帮助&#xff1b; kafka 如何减少数据丢失? 1000道 互联网大厂Java工程师 精选面试题-Java资源分享网 Apache Kafka 是一个高吞吐量的分布式消息队列&#xff0c;广泛用…...

CTF-PWN: 虚表(vtable)

vtable vtable&#xff08;虚表&#xff0c;virtual table&#xff09;是面向对象编程中的一个关键概念&#xff0c;主要用于实现多态性&#xff08;polymorphism&#xff09;。它是一种数据结构&#xff0c;通常是一个指针数组&#xff0c;包含了类的虚函数&#xff08;virtu…...

Redis 集群 总结

前言 相关系列 《Redis & 目录》&#xff08;持续更新&#xff09;《Redis & 集群 & 源码》&#xff08;学习过程/多有漏误/仅作参考/不再更新&#xff09;《Redis & 集群 & 总结》&#xff08;学习总结/最新最准/持续更新&#xff09;《Redis & 集群…...

2024校园交友系统构建指南/保姆版教程与技巧uniapp+php支持二开

一、建构技巧 1.前后端分离:采用前后端分离的开发模式&#xff0c;有助于提升开发效率&#xff0c;降低维护成本。前端专注于用户界面和交互体验&#xff0c;后端专注于业务逻辑和数据处理。 2.数据安全与隐私保护&#xff1a;实现细粒度的用户权限控制&#xff0c;确保用户数…...

NVR设备ONVIF接入平台EasyCVR视频分析设备平台视频质量诊断技术与能力

视频诊断技术是一种智能化的视频故障分析与预警系统&#xff0c;NVR设备ONVIF接入平台EasyCVR通过对前端设备传回的码流进行解码以及图像质量评估&#xff0c;对视频图像中存在的质量问题进行智能分析、判断和预警。这项技术在安防监控领域尤为重要&#xff0c;因为它能够确保监…...

系统思考—啤酒游戏经营决策沙盘

《第五项修炼&#xff1a;学习型组织建立》——系统思考的深层实践 越来越多的客户发现&#xff0c;系统思考不仅仅是一门课程&#xff0c;而是一种长期的实践。感谢合作伙伴对《第五项修炼》的支持&#xff0c;将其作为一个整体项目推荐。广东嘉荣超市在8月结束两天系统思考的…...

组件封装思路

组件封装的核心思路是&#xff1a;把可复用的结构只写一次&#xff0c;把可能发生变化的部分抽象成组件参数(props/插槽)。 如果是像纯文本&#xff0c;像是一些主标题和副标题&#xff0c;可以抽象成prop传入 如果主体内容是复杂的模版&#xff0c;有图片有列表等&#xff0c;…...

akshare股票涨跌停获取统计分析

参看&#xff1a; https://akshare.akfamily.xyz/data/stock/stock.html#id375 数据源来自东方财富网&#xff1a;https://quote.eastmoney.com/ztb/detail#typeztgc 参数说明 涨停统计&#xff1a; n/m代表m天中有n次涨停板 安装&#xff1a; pip install akshare -i http…...

前端对一个增删改查的思考

1、来源&#xff1a;dify dify/web/app/components/workflow/nodes/question-classifier/components/class-list.tsx at main langgenius/dify GitHub 2、代码流程&#xff1a; 3、思索问题&#xff1a; 1、为啥要用return形式&#xff0c;而不是value直接当函数&#xff1…...

【Clickhouse】客户端连接工具配置

ClickHouse 是什么 ClickHouse 是一个分布式实时分析型列式存储数据库。具备高性能&#xff0c;支撑PB级数据&#xff0c;提供实时分析&#xff0c;稳定可扩展等特性。适用于数据仓库、BI报表、监控系统、互联网用户行为分析、广告投放业务以及工业、物联网等分析和时序应用场…...

【测试平台】打包 jenkins配置和jenkinsfile文件

背景&#xff1a; 当打包机环境配置完成后&#xff0c;需要挂到master的jenkins中&#xff0c;完成调度。 jenkins启动 命令行直接启动即可。 nohup java -jar /usr/local/opt/jenkins/libexec/jenkins.war --httpListenAddress0.0.0.0 --httpPort80 appending output to n…...

Leetcode224 -- 基本计算器及其拓展

题目分析&#xff1a; 其实这个计算器的实现并不难&#xff0c;因为除了括号就剩下加减法嘛&#xff0c;括号肯定比加减法先执行&#xff0c;但是加减法是同级的&#xff0c;只是会改变数字的正负号而已&#xff0c;所以实现的逻辑并不是很难&#xff0c;我们只需要一个栈&…...

python的lambda实用技巧

lambda表达式 lambda表达式是一种简化的函数表现形式&#xff0c;也叫匿名函数&#xff0c;可以存在函数名也可以不存在。 使用一行代码就可以表示一个函数&#xff1a; # 格式 lambda arg[参数] : exp[表现形式] # 无参写法 lambda : "hello" # 一般写法 lambda …...

VB中的资源文件(Resource File)及其用途

在Visual Basic&#xff08;VB&#xff09;中&#xff0c;资源文件&#xff08;Resource File&#xff09;是一种特殊的文件&#xff0c;用于存储应用程序中使用的非代码资源。这些资源可以是字符串、图像、图标、音频文件、视频文件等。资源文件的主要用途是使应用程序的管理和…...

【vue】11.Vue 3生命周期钩子在实践中的具体应用

Vue 3的生命周期钩子为开发者提供了在不同阶段操作组件的强大能力。本文将带您了解每个生命周期钩子的使用场景&#xff0c;并通过简单的案例来展示它们在实际开发中的应用。 1. 创建阶段&#xff08;Creation Hooks&#xff09; beforeCreate 进行一些初始化操作&#xff0c…...

1.5 新特性 C++面试常见问题

1.5.1 说说C11的新特性有哪些&#xff1f; C11 引入了许多重要的新特性和增强&#xff0c;目的是提升语言的性能、可读性和简洁性。以下是 C11 的一些主要新特性&#xff1a; 1. 自动类型推导 使用 auto 关键字&#xff0c;可以让编译器自动推导变量的类型。auto x 42; …...

[mysql]子查询的概述和分类及单行子查询

子查询引入 查询的基本结构已经给大家了,子查询里面也是有一些新的内容,子查询其实就是在查询中嵌套另一个查询,叫嵌套查询可能大家更容易理解一点..,类似与FOR循环和FOR循环的嵌套,这一章是我们查询的最难的部分,大家 难度是查询的顶峰,多表查询和子查询是非常重要,SQL优化里…...

【人工智能】神经网络的优化器optimizer(二):Adagrad自适应学习率优化器

一.自适应梯度算法Adagrad概述 Adagrad&#xff08;Adaptive Gradient Algorithm&#xff09;是一种自适应学习率的优化算法&#xff0c;由Duchi等人在2011年提出。其核心思想是针对不同参数自动调整学习率&#xff0c;适合处理稀疏数据和不同参数梯度差异较大的场景。Adagrad通…...

Python:操作 Excel 折叠

💖亲爱的技术爱好者们,热烈欢迎来到 Kant2048 的博客!我是 Thomas Kant,很开心能在CSDN上与你们相遇~💖 本博客的精华专栏: 【自动化测试】 【测试经验】 【人工智能】 【Python】 Python 操作 Excel 系列 读取单元格数据按行写入设置行高和列宽自动调整行高和列宽水平…...

PPT|230页| 制造集团企业供应链端到端的数字化解决方案:从需求到结算的全链路业务闭环构建

制造业采购供应链管理是企业运营的核心环节&#xff0c;供应链协同管理在供应链上下游企业之间建立紧密的合作关系&#xff0c;通过信息共享、资源整合、业务协同等方式&#xff0c;实现供应链的全面管理和优化&#xff0c;提高供应链的效率和透明度&#xff0c;降低供应链的成…...

376. Wiggle Subsequence

376. Wiggle Subsequence 代码 class Solution { public:int wiggleMaxLength(vector<int>& nums) {int n nums.size();int res 1;int prediff 0;int curdiff 0;for(int i 0;i < n-1;i){curdiff nums[i1] - nums[i];if( (prediff > 0 && curdif…...

MODBUS TCP转CANopen 技术赋能高效协同作业

在现代工业自动化领域&#xff0c;MODBUS TCP和CANopen两种通讯协议因其稳定性和高效性被广泛应用于各种设备和系统中。而随着科技的不断进步&#xff0c;这两种通讯协议也正在被逐步融合&#xff0c;形成了一种新型的通讯方式——开疆智能MODBUS TCP转CANopen网关KJ-TCPC-CANP…...

苍穹外卖--缓存菜品

1.问题说明 用户端小程序展示的菜品数据都是通过查询数据库获得&#xff0c;如果用户端访问量比较大&#xff0c;数据库访问压力随之增大 2.实现思路 通过Redis来缓存菜品数据&#xff0c;减少数据库查询操作。 缓存逻辑分析&#xff1a; ①每个分类下的菜品保持一份缓存数据…...

【android bluetooth 框架分析 04】【bt-framework 层详解 1】【BluetoothProperties介绍】

1. BluetoothProperties介绍 libsysprop/srcs/android/sysprop/BluetoothProperties.sysprop BluetoothProperties.sysprop 是 Android AOSP 中的一种 系统属性定义文件&#xff08;System Property Definition File&#xff09;&#xff0c;用于声明和管理 Bluetooth 模块相…...

【数据分析】R版IntelliGenes用于生物标志物发现的可解释机器学习

禁止商业或二改转载&#xff0c;仅供自学使用&#xff0c;侵权必究&#xff0c;如需截取部分内容请后台联系作者! 文章目录 介绍流程步骤1. 输入数据2. 特征选择3. 模型训练4. I-Genes 评分计算5. 输出结果 IntelliGenesR 安装包1. 特征选择2. 模型训练和评估3. I-Genes 评分计…...

CVE-2020-17519源码分析与漏洞复现(Flink 任意文件读取)

漏洞概览 漏洞名称&#xff1a;Apache Flink REST API 任意文件读取漏洞CVE编号&#xff1a;CVE-2020-17519CVSS评分&#xff1a;7.5影响版本&#xff1a;Apache Flink 1.11.0、1.11.1、1.11.2修复版本&#xff1a;≥ 1.11.3 或 ≥ 1.12.0漏洞类型&#xff1a;路径遍历&#x…...

C++课设:简易日历程序(支持传统节假日 + 二十四节气 + 个人纪念日管理)

名人说:路漫漫其修远兮,吾将上下而求索。—— 屈原《离骚》 创作者:Code_流苏(CSDN)(一个喜欢古诗词和编程的Coder😊) 专栏介绍:《编程项目实战》 目录 一、为什么要开发一个日历程序?1. 深入理解时间算法2. 练习面向对象设计3. 学习数据结构应用二、核心算法深度解析…...