vue中递归组件实现多级列表

一、递归组件的概念

递归组件：

递归组件简单来说在组件内使用组件本身。这个在vue的项目开发中也是比较常见的。对于一些多级的数据嵌套，如果对于每一层数据都进行for循环嵌套，那会非常繁琐，也很不方便。而如果使用递归组件，就可以一次性解决，嵌套层级简单，可以实现多级列表。

二、递归组件的实现

父组件的data数据

name: 'Home'
data () {return {list: [{title: '用户管理',children: [{title: '会员用户',children: [{title: '钻石用户'},{title: '白银用户'},{title: '黄金用户'}]},{title: '普通用户'},{title: '超级用户'}]},{title: '订单管理',children: [{title: '订单列表'},{title: '退货列表'}]},{title: '商家管理',children: [{title: '普通商家'},{title: '会员商家'}]},{title: '权限管理',children: [{title: '用户权限'},{title: '管理员权限'}]}]}},

我们可以先进行第一层数据的遍历，对于父组件，先进行绑定data中的数据list，在父组件调用的时候使用:list="list"，然后子组件通过props进行接收数据list，最后通过v-for进行遍历数据，显示第一个层级的数据。完整代码如下：


<template><div><div class="item" v-for="(item, index) of list" :key="index"><div class="item-title border-bottom">{{ item.title }}</div></div></div>
</template><script>
export default {name: 'Detail',props: {list: Array}
}
</script><style lang="stylus" scoped>.item-titleline-height: .8remfont-size: .32rempadding: 0 .2rem.item-childrenpadding: 0 .2rem
</style

显示效果如下图所示

在vue中使用递归组件，就是在遍历第一个层级数据的里面，再次使用组件。通过进行v-for遍历数据，子组件再次绑定数据 :list="item.children"，进行遍历，这样就实现了递归组件，可以实现层层遍历，实现多级列表。完整代码如下：

<template><div><div class="item" v-for="(item, index) of list" :key="index"><div class="item-title border-bottom">{{ item.title }}</div><!-- 递归组件是指在组件内部调用组件自身 --><div v-if="item.children" class="item-children"><detail :list="item.children"></detail></div></div></div>
</template><script>
export default {name: 'Detail',props: {list: Array}
}
</script><style lang="stylus" scoped>.item-titleline-height: .8remfont-size: .32rempadding: 0 .2rem.item-childrenpadding: 0 .2rem
</style>

显示效果如下图所示

vue中递归组件实现多级列表相关推荐

vue html模板递归,vue使用递归组件实现多级列表
一.背景需求在页面上渲染一个多级列表的时候,数据往往也具有多个层级例如:数组的每个元素都是一个对象,对象中的value可能是一个数组 { "ret": true, " ...
Vue递归组件实现多级列表分类
Vue递归组件实现多级列表分类信息的分类展示数据格式 const treeObj = {name: "电子产品",children: [{name: "电视" ...
VUE递归树形实现多级列表
VUE递归树形实现多级列表什么是递归? 简单来说就是在组件中内使用组件本身. 为什么要用递归? 如果出现很多下拉菜单,同级,分级数据,层级混杂,可以使用v-for的嵌套循环不就完事了.对,没毛病这样 ...
ant design vue 中Upload组件如何自定义文件列表的样式
ant design vue 中Upload组件如何自定义文件列表的样式问题历程 UploadList 组件源码 h() 方法实现注问题技术:vue.ant design vue 在开发项 ...
vue中组件的导出导入_5.2 vue中 keep-alive 组件的作用，详细解释keep-alive使用方法...
问题:vue中 keep-alive 组件的作用 keep-alive:主要用于保留组件状态或避免重新渲染. 比如: 有一个列表页面和一个详情页面,那么用户就会经常执行打开详情=>返回列表=& ...
vue的动画封装，vue的递归组件
在项目中,许多地方会使用到类似的动画,所以我们封装起来会好点,我们先创建一个组件,用来设置它的动画效果, <template><transition name="fade& ...
Vue中父子组件的六种通信方式
Vue中父子组件的通信方式一.Props + $emit Props:父传子父组件Parent.vue: <Child :message="message" @chang ...
vue中父子组件先后渲染_Vue中父子组件执行的先后顺序
前几天,朋友向我提出了一个关于Vue中父子组件执行的先后顺序问题,相信很多朋友在学习的过程中也会遇到这个问题,所以我就在此提出我自己的一些小看法. 问题如下:请问下图中父子组件执行的先后顺序? 首先, ...
vue中父子组件及 watch用法
父子组件及 watch vue中父子组件及 watch用法 - coder_zhang123456 - 博客园

vue中递归组件实现多级列表

vue中递归组件实现多级列表相关推荐

最新文章

热门文章