vue 递归组件的简单使用示例

2024-08-06 08:22:46

前言

递归相信很多同学已经不陌生了，算法中我们经常用递归来解决问题。比如经典的：从一个全为数字的数组中找出其中相加能等于目标数的组合。思路也不难，循环数组取值，不断递归相加，直到满足目标数条件。递归虽然能解决大部分，但弊处在于，很容易写出死循环的代码，导致爆栈。下面以我实际业务场景讲讲递归在vue组件中的应用。

在vue中使用

完成一个完整的递归，我个人认为最重要的有两点：

确定好进入递归的条件;
确定好跳出递归的条件;

其中最重要的就是确定什么时候跳出递归。递归组件实际上非常简单，就是 A组件里再调用 A组件，就形成了一个递归。以下面我遇到的业务来说，某天接到一个需求，需要在一堆用户中根据不同标签条件组合筛选出目标用户，因此就有如下设计图：

咋一看，可能会被懵住，但其实只要经过仔细分析，发现并不是很难，看图不少同学会感觉，有点像我们常说的套娃，一层套一层。对于这种图，我们首要分析其中最小单元是哪一个，上图中很容易看出最小的是这一块。图中的大结构基本都是由这一小块组合而成，只要先实现了这块，其他无非就是通过递归来一层一层数据渲染。

后面的无非就是判断数据结构，如果没有子树的话，就直接简单渲染该项目。如果某项含有子树的话，就得要重新渲染这块组件，将子数据传递进去。所以思路其实非常简单，假设我们的数据结构是这样的：

{
 type: 'or',
 valueList: [
  {
   condition: '最近7天登录次数',
   login: '!=',
   value: 45
  },
  {
   condition: '最近7天登录次数',
   login: '!=',
   value: 45
  },
  {
   type: 'and'
   valueList: [
   	{
     condition: '最近7天登录次数',
     login: '!=',
     value: 45
    }
   ]
  }
 ]
}

上面数据结构很清晰，可以看到当数组里面的子项目包含有 valueList 时表明需要重新渲染上图所说的一小块组件。因此我们可以简单编码如下(下面代码还有可优化的地方)：

<template>
 <div class="label-list">
  <el-tag type="primary" size="mini" class="logic">{{ typeDict[treedata.type] }}</el-tag>
  <template v-for="(item, index) in treedata.valueList">
   <ul v-if="!item.hasOwnProperty('valueList')" :key="'rule_' + index">
    <li>{{ item.condition }} {{ item.logic }} {{ item.value }}</li>
   </ul>
  </template>
  <template v-for="(item, index) in treedata.valueList">
   <!-- 此处判断有 valuelist 因此再次调用渲染本组件 进行子项的渲染 -->
   <label-shows-view v-if="item.hasOwnProperty('valueList')" :key="'tree_' + index" :treedata="item"></label-shows-view>
  </template>
 </div>
</template>
<script>
const _TYPE = {
 'and': '且',
 'or': '或'
}
export default {
 name: 'LabelShowsView',
 props: {
  treedata: {
   type: Object,
   required: true
  }
 },
 data() {
  return {
   typeDict: _TYPE
  }
 }
}
</script>

不难看出，主要是要分析找出数据结构中重复的部分，一层一层渲染下去。其实，对于上面例子是纯展示来说比较容易理解，如果加上有数据交互的话，就需要额外注意了。递归层级很深的话，事件传递、数据变更等都需要小心处理，就比如笔者在完成上述可视化配置筛选客群时就遇到了如下图的：

可以添加、删除子项，并且还可以拖拽每组进行位置的调整。这时就可以利用类似冒泡的方法，子组件即触发事件也接受事件。比如删除某一组条件时，需要通知父组件要删除的是子数据的哪一项，如下：

<!-- labelRulesView.vue -->
<!-- 这个自定义组件就是本组件 即递归的组件 -->
<label-rules-view v-if="item.hasOwnProperty('valueList')" :label-list="labelList" :treedata="item" :current-index="index" @delGroup="funDelGroup"></label-rules-view>
<!-- 本组件监听 delGroup 事件 -->

<el-button size="mini" type="danger" icon="el-icon-delete" class="operate-btn" @click="handleDelNewGroup(currentIndex)"></el-button>

// 删除某个组
handleDelNewGroup(index) {
 this.$emit('delGroup', index) // 向上层组件触发事件
},
funDelGroup(index) {
 this.treedata.valueList.splice(index, 1)
},

在递归组件中，很多时候这个组件即扮演着子组件，也扮演着父组件。因此要控制好数据之间的交互，否则很容易出现数据错乱的情况

小结

本文是笔者在实际业务场景中遇到并顺手记录，利用递归组件，我们甚至可以完成一些比较复杂的图形展示。希望能帮到大家拓宽下思路，帮到你的话还是顺手点个小心心（拒绝下次一定[doge]）

以上就是vue 递归组件的简单使用示例的详细内容，更多关于vue 递归组件的资料请关注我们其它相关文章！

Vue如何跨组件传递Slot的实现

在开发过程中遇到这样一个问题,如何跨组件传递插槽.因为在开发类似树组件的过程中,插槽需要通过外部传递到树的根节点,然后通过根节点依次传递到各个叶子节点.那么如何把根节点的Slot如传递给子组件呢? 我们在开发过程中,希望可以这样实现重新定义叶子节点的结构: <data-tree> <template v-slot:node="data"> <div>{{data.title}} - {{data.text}}</div> </tem
Vue实现多页签组件

直接看效果,增加了右键菜单,分别有重新加载.关闭左边.关闭右边.关闭其他功能. 也可以到我的github上看看代码(如果觉得这个组件有用的话,别忘了顺手给个小星星) 代码:https://github.com/Caijt/VuePageTab 演示:https://caijt.github.io/VuePageTab/ 我这个多页签组件里面的删除缓存的方法不是使用keep-alive组件自带的include.exculde结合的效果,而是使用暴力删除缓存的方法,这个在上个博客中也有提到,用这种方
Vue2实现组件props双向绑定

Vue学习笔记-3 前言 Vue 2.x相比较Vue 1.x而言,升级变化除了实现了Virtual-Dom以外,给使用者最大不适就是移除的组件的props的双向绑定功能. 以往在Vue1.x中利用props的twoWay和.sync绑定修饰符就可以实现props的双向绑定功能,但是在Vue2中彻底废弃了此功能,如果需要双向绑定需要自己来实现. Vue2的组件props通信方式在Vue2中组件的props的数据流动改为了只能单向流动,即只能由组件外(调用组件方)通过组件的DOM属性attribu
Vue组件简易模拟实现购物车

本文实例为大家分享了Vue组件模拟实现购物车的具体代码,供大家参考,具体内容如下代码: <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <ti
vue之父子组件间通信实例讲解(props、$ref、$emit)

组件是 vue.js 最强大的功能之一,而组件实例的作用域是相互独立的,这就意味着不同组件之间的数据无法相互引用.那么组件间如何通信,也就成为了vue中重点知识了.这篇文章将会通过props.$ref和 $emit 这几个知识点,来讲解如何实现父子组件间通信. 在说如何实现通信之前,我们先来建两个组件father.vue和child.vue作为示例的基础. //父组件 <template> <div> <h1>我是父组件!</h1> <child>
Vuejs第九篇之组件作用域及props数据传递实例详解

本篇资料来于官方文档: http://cn.vuejs.org/guide/components.html#Props 本教程是小编结合官方文档整理的一套更加细致,代码更多更全的教程,特别适合新手阅读. props数据传递 ①组件实例的作用域: 是孤立的,简单的来说,组件和组件之间,即使有同名属性,值也不共享. <div id="app"> <add></add> <del></del> </div> <sc
vue mounted组件的使用

1.钩子函数钩子函数是Windows消息处理机制的一部分,通过设置"钩子",应用程序可以在系统级对所有消息.事件进行过滤,访问在正常情况下无法访问的消息.钩子的本质是一段用以处理系统消息的程序,通过系统调用,把它挂入系统.(百度百科) 2.相对于前端来讲对于前端来说,钩子函数就是指再所有函数执行前,我先执行了的函数,即钩住我感兴趣的函数,只要它执行,我就先执行. 3.vue中的mounted 在这发起后端请求,拿回数据,配合路由钩子做一些事情类型:Function 详细: e
vue组件是如何解析及渲染的？

前言本文将对vue组件如何解析以及渲染做一个讲解. 我们可以通过Vue.component注册全局组件,之后可以在模板中进行使用 <div id="app"> <my-button></my-button> </div> <script> Vue.component("my-button", { template: "<button> 按钮组件</button>"
vue如何引用其他组件（css和js）

1.vuejs组件之间的调用components 注意:报错Do not use built-in or reserved HTML elements as component id: 修改组件的名字,例如不能使用address为组件名字组件名字不要使用内置的或保留HTML元素为组件id, App.vue是一个入口,vue必须注册才能使用 2.vue引入外部的css,放在和引入vue的位置一样 ./代表当前项目,../代表上一级项目 import '../static/style/reset.
vue 递归组件的简单使用示例

前言递归相信很多同学已经不陌生了,算法中我们经常用递归来解决问题.比如经典的:从一个全为数字的数组中找出其中相加能等于目标数的组合.思路也不难,循环数组取值,不断递归相加,直到满足目标数条件.递归虽然能解决大部分,但弊处在于,很容易写出死循环的代码,导致爆栈.下面以我实际业务场景讲讲递归在vue组件中的应用. 在vue中使用完成一个完整的递归,我个人认为最重要的有两点: 确定好进入递归的条件; 确定好跳出递归的条件; 其中最重要的就是确定什么时候跳出递归.递归组件实际上非常简单,就是 A
Vue递归组件+Vuex开发树形组件Tree--递归组件的简单实现

写在前面首先,本篇文章所开发的组件并非一个已经开源的上线组件,所以如果你急于需要一个插件来只做你的项目,那么并不能带给你及时的帮助.这个组件的开发预计写两篇文章,一遍写组件,一篇写组件逻辑.这篇文章也是我自己开发的从无到有的过程,所以它可以为你提供一些Tree组件开发的思路,代码写到一定程度,不能完全依赖插件了,有时间可以看看插件源码或者动手去开发,这样真的能加深对技术的掌握程度. 开发过程 1.数据仓库-Vuex 2.组件的循环创建-递归组件需求决定了我的技术选型,项目需求是一个中国各级政
vue递归组件实战之简单树形控件实例代码

1.递归组件-简单树形控件预览及问题在编写树形组件时遇到的问题: 组件如何才能递归调用? 递归组件点击事件如何传递? 2.树形控件基本结构及样式 <template> <ul class="vue-tree"> <li class="tree-item"> <div class="tree-content"> <div class="expand-
vue递归组件实现树形结构

本文实例为大家分享了vue递归组件实现树形结构,供大家参考,具体内容如下一.递归组件什么是递归组件?简单来说就是在组件中内使用组件本身.函数自己调用自己.很多情况下我们呢刷数据的时候,不知道到底这个数据结构是有多少层,那么这个时候我们就用到了递归来实现. 二.先用for来遍历: 父组件中: <template> <div class="home"> <tree :title="list.name" :list=&q
vue父子组件的嵌套的示例代码

本文介绍了vue父子组件的嵌套的示例代码,分享给大家,具体如下: 组件的注册: 先创建一个构造器 var myComponent = Vue.extend({ template: '...' }) 用Vue.component注册,将构造器用作组件(例为全局组件) Vue.component('my-component' , myComponent) 注册局部组件: var Child = Vue.extend({ /* ... */ }) var Parent = Vue.extend({ t
vue递归组件实现elementUI多级菜单

本文实例为大家分享了vue递归组件实现elementUI多级菜单的具体代码,供大家参考,具体内容如下先看效果: 一.子组件 <template> <div class="myDiv">  <template v-for="(item,i) in listAll"> <!-- 有c
Vue transx组件切换动画库示例详解

目录来个介绍安装使用支持参数支持事件支持API 支持的动画类型说明来个介绍先奉上组件库的名称:transx github地址:github.com/tnfe/transx npm参考: www.npmjs.com/package/tra… 示例地址:codesanbox 安装 npm install transx or yarn add transx 使用  <trans-x :time="time" :delay=&q
Vue实现递归组件的思路与示例代码

目录前言一.递归组件是什么? 二.Vue实现递归的核心思路三.代码示例 1.父级 2.子级 3.实现效果补充:递归组件的应用场景总结前言在我们开发过程中,为了提高开发效率,降低开发难度,我们会直接使用组件库来实现,同时也衍生出了很多优秀的组件库,如:饿了么.蚂蚁.Iview.vant等等.但是有时这些组件库提供给我们的组件不满足我们的需求或者定制组件时成本太高,那么我们就要手动实现了. 一.递归组件是什么? 字面理解为层层递进最后归并到一起,它的特点就是层级分明. 例如饿了么组件库
vue实现组件之间传值功能示例

本文实例讲述了vue实现组件之间传值功能.分享给大家供大家参考,具体如下: slot标签: 想向封装好结构的组件中插入内容,需要借助<slot></slot> 在组件之中进行关联:如模板中: <slot name='txt'></slot> 组件调用中: <p slot='txt'></p> 注:如果只有slot上面每一定义name属性,则只能有一个slot <div class='box'> <com> &
Vue业务组件封装Table表格示例详解

目录前言 Table组件介绍 Table组件封装思路了解element Table组件代码 Table组件如何去封装新建LTable组件配置文件配置插槽动态组件解决插槽存在的问题代码实现总结前言这个系列主要是分享自己在工作中常用到的业务组件,以及如何对这些组件进行有效的封装和封装的思路.注:都是基于element ui进行二次封装. 封装组件的基本方法就是通过props和emit进行父子组件的传值和通信.利用插槽.组件等去增加组件的可扩展性和复用性. Table组件介绍用

vue 递归组件的简单使用示例

前言

在vue中使用

小结

相关推荐

随机推荐