vue html模板递归,vue使用递归组件实现多级列表

一、背景需求

在页面上渲染一个多级列表的时候，数据往往也具有多个层级

例如：数组的每个元素都是一个对象，对象中的value可能是一个数组

{

"ret": true,

"data": {

"sightName": "大连圣亚海洋世界(AAAA景区)",

"bannerImg": "",

"categoryList": [{

"title": "成人票",

"children": [{

"title": "成人三馆联票",

"children": [{

"title": "成人三馆联票 - 某一连锁店销售"

}]

},{

"title": "成人五馆联票"

}]

}, {

"title": "学生票"

}, {

"title": "儿童票"

}, {

"title": "特惠票"

}]

}

在这种情况下，使用多重循环的HTML代码效率并不高，而且会增加后期维护的成本

vue提供了一种更好的实现方式：即递归组件

二、递归组件的概念和使用

递归组件，顾名思义，就是在组件内部调用自己

通过使用组件的name选项对应的标签，实现多重循环的效果

同时，在调用组件自身的时候，要通过v-if实现条件渲染

防止因无限调用组件而导致栈溢出

以上面给的数据为例，我们希望将 categoryList 渲染为多级列表

当父组件将 categoryList 传递给子组件的 list 变量后：

export default {

name: 'DetailList',

props: {

list: Array

}

若当前被循环的item有children，就递归调用自身，进入下一层级

实际的效果如下：

image.png

vue html模板递归,vue使用递归组件实现多级列表相关推荐

Vue递归组件实现多级列表分类
Vue递归组件实现多级列表分类信息的分类展示数据格式 const treeObj = {name: "电子产品",children: [{name: "电视" ...
vue中递归组件实现多级列表
一.递归组件的概念递归组件: 递归组件简单来说在组件内使用组件本身.这个在vue的项目开发中也是比较常见的.对于一些多级的数据嵌套,如果对于每一层数据都进行for循环嵌套,那会非常繁琐,也很不方便. ...
Vue使用vue-cli创建vue的模板项目---vue工作笔记0018
然后我们使用vue-cli脚手架,来创建一个demo项目去. 可以看到上面是过程中,用到的命令. 首先我们应该先去安装nodejs的环境对吧,先去安装nodejs以后,这个npm,命令我们就可以使用了 ...
Vue动态查询条件-Vue动态查询规则-Vue多条件分组组合查询-递归组件(一):前端
先看最终的效果: 最近项目上有一个需求,VUE前端要实现动态查询条件组件,后端就能够动态组装SQL. 要模仿人家Azure Devops的查询功能,我丢,Azure Devops是人家微软开发的个东西 ...
VUE递归树形实现多级列表
VUE递归树形实现多级列表什么是递归? 简单来说就是在组件中内使用组件本身. 为什么要用递归? 如果出现很多下拉菜单,同级,分级数据,层级混杂,可以使用v-for的嵌套循环不就完事了.对,没毛病这样 ...
vue 雷达扫描_GitHub - suneildve/vueDataV: 基于Vue + Echarts 构建的数据可视化平台，酷炫大屏展示模板和组件库，持续更新各行各业实用模板和炫酷小组件。...
前言一个基于Vue前端框架和第三方图表库echarts构建的可视化大数据平台,通过vue项目构建.指令的灵活运用.组件封装.组件之间通信,使内部图表组件库可实现自由替换和组合. 项目中部分前端库采用 ...
《Vue.js实战》第七章.组件
7.1 组件作用: 提高代码复用性,使项目易于维护 7.1 组件的使用 7.1.1 组件注册-全局注册全局注册后,任何vue的实例都可以使用该组件. Vue.component('my-compon ...
vue 改变domclass_基于 vue 开发甘特图组件的心路历程（兼设计分享）
语雀原文有更好的排版体验~ 这篇文章主要讲述笔者开发 v-gantt 甘特图组件的经过. 起源公司项目有个甘特图的需求. 笔者考察了世面上常见的甘特图组件后,本着我上我也行的心态,以及考虑 ...
VUE类似微信朋友圈查看图片组件
1.效果展示瞎封装组件系列: VUE类似淘宝选择商品多规格组件 VUE简单提示框 VUE树形图(递归实现) VUE多店铺购物车 2.使用方法 <template><div clas ...

vue html模板递归,vue使用递归组件实现多级列表

vue html模板递归,vue使用递归组件实现多级列表相关推荐

最新文章

热门文章