vue实现递归组件

最新推荐文章于 2024-03-13 16:23:55 发布
最新推荐文章于 2024-03-13 16:23:55 发布
阅读量147 收藏
点赞数
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_34607371/article/details/103574114
版权

父组件

<loongDropDownBox :keyVal="keyVal" :menuData="menuData"></loongDropDownBox>

组件

<template>
  <ul style="width: 100%">
    <li v-for="(item,index) in menuData " :key="index">
      <p>{{item.name}}</p>
      <loongDropDownBox :keyVal="keyVal" :menuData="item.children"></loongDropDownBox>
    </li>
  </ul>
</template>

 

勋勋勋勋小勋勋
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
Vue递归组件的使用
qq_40547061的博客
04-25 896
1.封装简单的Menu组件 2.递归组件
vue 循环 递归组件_vue递归组件
weixin_34676828的博客
12-23 355
[TOC]>[success] # vue递归组件一般只有树形的结构的数据需要用到递归组件，也是头一次用，参考[案例网站](https://blog.csdn.net/zhaoxiang66/article/details/80940762)，递归组件的显示隐藏需要后台在接口数据增加一个字段，来控制显示隐藏，或者前端自己手动在数据里面加一个的属性，值为布尔值，最好由后台来加这个字段因为前台加...
vue递归组件的基础报错问题记录解决
爱意迷了眼丶的博客
06-30 188
问题：组件注册的方式不对解决：
Vue 的递归组件
weixin_44237303的博客
01-14 115
Vue 的递归组件
vue递归调用组件报错
weixin_44364294的博客
11-30 842
vue递归调用组件 报错 请确认组件名称
vue 项目实战 递归
lzfengquan的博客
09-06 6046
1 递归函数必须接受参数。（比如我要递归谁？） 2 在递归函数的定义初始，应该有一个判断条件，当参数满足这个条件的时候，函数停止执行，并返回值。（指定退出条件，否则就会死循环） 3 每次递归函数执行自己的时候，都需要把当前参数做某种修改，然后传入下一次递归。（每次循环在调用自己一次并传参） 4当参数被累积修改到符合初始判断条件了，递归就停止了。（最后满足条件就退出） 简单的说递归函数就是在函数体内调用n次本函数。 看一下项目的要求怎么实现 项目要求 左侧树结构为“一级组织机构 到 三级设备”树，列表初始化显
vue递归以及示例
weixin_53954018的博客
12-09 1375
递归是一种在函数中调用自身的编程技巧。通过递归，函数可以将一个问题分解为更小的子问题，并且在达到基本情况（终止条件）时停止递归。递归在解决某些问题时非常有用，特别是那些可以被分解为相同类型的子问题的情况。2.例如递归级联去掉空的children。传入相对应的属性以及数据源。3.例如级联禁用某一层级。
Vue2递归组件实现树形菜单
11-26
今天看了老长时间递归组件，官方给的教程太简便了，根本看不出到底怎么用。于是自己查网摸索了一下，这儿只把核心思想写出来。 效果如下图，点击后打开二级菜单，再点击后打开三级。 //js //引子 //思想：当v-if=...
vue 如何使用递归组件
01-21
类似于这种，数组中还有一个数组，有的人可能会说那就用两个v-for嵌套使用啊，但是这里，我们想要它们是同样的功能，同样的样式，所以使用递归组件是最好的选择。 递归组件：在组件的自身再调用组件的自身。 组件...
Vue递归组件+Vuex开发树形组件Tree--递归组件的简单实现
10-17
总结起来，本文通过一个实际的开发案例介绍了如何使用Vue递归组件结合Vuex开发树形组件。递归组件的使用简化了多层级结构的渲染，而Vuex则提供了集中管理状态的能力，使得数据的动态加载和变更变得更为便捷。在实际...
vue 组件递归调用
07-03
vue组件递归调用，展示树状结构，
Vue实现递归组件
热门推荐
weixin_53291256的博客
04-05 1万+
Vue实现递归组件 文章目录Vue实现递归组件前言一、递归组件是什么？二、Vue实现递归的核心思路三、代码示例1.父级2.子级3、实现效果四、总结 前言 在我们开发过程中，为了提高开发效率，降低开发难度，我们会直接使用组件库来实现，同时也衍生出了很多优秀的组件库，如：饿了么、蚂蚁、Iview、vant等等。但是有时这些组件库提供给我们的组件不满足我们的需求或者定制组件时成本太高，那么我们就要手动实现了。 一、递归组件是什么？ 字面理解为层层递进最后归并到一起，它的特点就是层级分明。 例如饿了么组件库的树
【Vue】Vue框架 之 组件递归
facial_123的博客
09-12 1911
组件递归，简述了vue框架中组件递归的出现场景，使用原理，以及一点注意事项
ant design vue中menu组件递归渲染报错解决
牛先森家的博客
06-28 2024
ant design vue中menu组件递归渲染报错解决
Vue中如何进行递归组件的处理？
最新发布
有我更精彩的博客
03-13 1334
在前端开发中，Vue 是一种流行的 JavaScript 框架，它使用一种名为 Vue 组件的方式来构建用户界面。在 Vue 中进行递归组件的处理是一个常见的面试题，今天我们就来深入探讨一下这个问题。
Vue独立组件开发-递归组件
小马甲
12-30 561
递归组件就是指组件在模板中调用自己。递归组件的使用需要特别关注结束条件，否则会一直递归下去导致程序报错。本人每篇文章都是一字一句码出来，希望对大家有所帮助，多提提意见。
vue 递归组件
m0_47659279的博客
08-05 2736
递归组件就是在模板中引用自身的组件 我们有时希望在一个组件内部渲染该组件本身，例如渲染树形结构时，需要在树根渲染子树，而子树与树根的结构是一样的，因此存在递归
Vue 递归组件
大灰狼的小绵羊哥哥的博客
12-09 6677
对于一些有规律的DOM结构，如果我们再一遍遍的编写同样的代码，显然代码是比较繁琐和不科学的，而且自己的工作量会大大增加， 那么有没有一种方法来解决这个问题呢？ 答案是肯定的，我们可以通过 递归 方式来生成这个结构，当然在 Vue 模板中也是可以实现的，我们可以在 Vue 的组件中调用自己本身，这样就能达到目的。 当然，在 Vue 中，组件可以递归的调用本身，但是有一些条件： 该组件一定要有 name 属性 要确保递归的调用有终止条件，防止内存溢出 为了方便理解递归组件，我写了一个小小的 Demo：
vue自定义递归组件实现展开收起
06-10
Vue的递归组件可以用于渲染树形结构，可以通过自定义递归组件来实现树形结构的展开和收起。 以下是一个简单的实现示例： 组件代码： ``` <template> <ul> <li v-for="item in items" :key="item.id"> <span class="toggle" @click="toggle(item)">{{ item.expanded ? '-' : '+' }}</span> <span class="text">{{ item.text }}</span> <tree v-if="item.children && item.expanded" :items="item.children"></tree> </li> </ul> </template> <script> export default { name: 'tree', props: { items: { type: Array, required: true } }, methods: { toggle(item) { item.expanded = !item.expanded; } } }; </script> <style scoped> ul { list-style: none; padding-left: 10px; } .toggle { display: inline-block; width: 20px; text-align: center; cursor: pointer; } .text { margin-left: 5px; } </style> ``` 上述代码中，我们定义了一个递归组件`tree`，用于渲染树形结构。该组件包含一个`items`属性，用于传入树形结构的数据。在组件的模板中，使用`v-for`指令遍历`items`数组，渲染每个节点。对于每个节点，我们添加了一个展开/收起按钮，并使用`v-if`指令判断子节点是否需要渲染。在点击展开/收起按钮时，调用`toggle`方法来切换节点的展开状态。 使用该组件时，只需要传入树形结构的数据即可： ``` <template> <div> <tree :items="items"></tree> </div> </template> <script> export default { data() { return { items: [ { id: 1, text: '节点1', expanded: false, children: [ { id: 11, text: '子节点1-1', expanded: false, children: [] }, { id: 12, text: '子节点1-2', expanded: false, children: [] } ] }, { id: 2, text: '节点2', expanded: false, children: [ { id: 21, text: '子节点2-1', expanded: false, children: [] }, { id: 22, text: '子节点2-2', expanded: false, children: [] } ] } ] }; } }; </script> ``` 这样，当用户点击节点的展开/收起按钮时，就会切换节点的展开和收起状态，并相应地展开或收起节点的子节点。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值