递归组件（简单介绍）

什么是递归组件？

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

应用：

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

实例：

导航栏：

此处我展示关键的代码

当前组件接收到多层的list数据，对多层数据进行遍历，关键看html中的文件（在当前组件调用自己<RootNav/>）

<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中怎样去写，关键看给的数字是什么样的。一般都是多层嵌套，下图这样的。

var demoData = [{'id': '1','menuName': '基础管理','menuCode': '10','children': [{'menuName': '用户管理','menuCode': '11'},{'menuName': '角色管理','menuCode': '12','children': [{'menuName': '管理员','menuCode': '121'},{'menuName': 'CEO','menuCode': '122'},{'menuName': 'CFO','menuCode': '123'},{'menuName': 'COO','menuCode': '124'},{'menuName': '普通人','menuCode': '124'}]},{'menuName': '权限管理','menuCode': '13'}]},{'id': '2','menuName': '商品管理','menuCode': ''},{'id': '3','menuName': '订单管理','menuCode': '30','children': [{'menuName': '订单列表','menuCode': '31'},{'menuName': '退货列表','menuCode': '32','children': []}]},{'id': '4','menuName': '商家管理','menuCode': '','children': []}
];export default  demoData;

递归组件（简单介绍）相关推荐

wex5 数据绑定组件简单介绍
wex5 数据绑定组件简单介绍了解一下wex5组件一个页面分为数据和展现两个部分,组件也对应分为数据组件和展现组件. 使用数据组件存储页面中的数据:使用展现组件将页面展现出来.数据组件和展现组件 ...
云原生及k8s组件简单介绍
一.云原生云原生景观图: https://landscape.cncf.io/ cncf官网: https://www.cncf.io/projects/ Graduated 毕业项目,可在生产中使 ...
Android学习之四大组件简单介绍
组件是可以调用的基本功能模块.Android的应用程序就是由组件组成的,Android系统中有四个重要的组件,分别是Activity(活动).Service(服务).BroadcaseReceiver ...
vue中递归组件实现多级列表
一.递归组件的概念递归组件: 递归组件简单来说在组件内使用组件本身.这个在vue的项目开发中也是比较常见的.对于一些多级的数据嵌套,如果对于每一层数据都进行for循环嵌套,那会非常繁琐,也很不方便. ...
client高性能组件化框架React简单介绍、特点、环境搭建及经常使用语法
[本文源址:http://blog.csdn.net/q1056843325/article/details/54729657 转载请加入该地址] 明天就是除夕了预祝大家新春快乐 [ ]~(￣▽￣) ...
简单介绍下我使用了一年多还不知道的Sql server 2005 组件知识
简介 Microsoft SQL Server 2005 是用于大规模联机事务处理 (OLTP).数据仓库和电子商务应用的数据库平台:也是用于数据集成.分析和报表解决方案的商业智能平台. SQL Se ...
利用递归组件实现一个简单的树组件（vue3）
1. 简言闲来无事不从容,睡觉东窗日已红. 万物静观皆自得,四时佳兴与认同. 最近学习vue3组件的时候实现了一个简单的树组件.话不多说,直接上代码. 2.效果这个数组件实现了展开.选中和选择三个 ...
地图可视化组件–folium简单介绍
地图可视化组件–folium简单介绍 folium是基于Python环境开发的一个地图绘制包,可以在程序中引入从而绘制精美的地图数据可视化图表.folium建立在Python生态系统的数据处理能力和L ...
php $rs1- gt eof,PHP_PHP速成大法，简单介绍一下PHP的语法 1、嵌 - phpStudy
PHP速成大法简单介绍一下PHP的语法 1.嵌入方法: 类似ASP的,当然您也可以自己指定. 2.引用文件: 引用文件的方法有两种:require 及 include. require 的使用方法如 ...

递归组件（简单介绍）

什么是递归组件？

应用：

实例：

递归组件（简单介绍）相关推荐

最新文章

热门文章