Vue一个案例引发的递归组件的使用详解


Posted in Javascript onNovember 15, 2018

今天我们继续使用 Vue 的撸我们的实战项目,只有在实战中我们才会领悟更多,光纸上谈兵然并卵,继上篇我们的 《Vue一个案例引发的动态组件与全局事件绑定总结》 之后,今天来聊一聊我们如何在项目中使用递归组件。

信息的分类展示列表

这次我们主要是实现一个信息的分类展示列表存在二级/三级的分类,如下如所示:

Vue一个案例引发的递归组件的使用详解

看到这个很多人会想到这个实现起来很简单啊,来个嵌套循环不就完事了。

对,你说的没错,事实就是这样简单。那么就先来看看这么简单的列表怎么实现的,然后这个方案的劣势在哪里。

首先看看我们的数据格式

list: [{
 name: "经济",
 children: [{
  name: "如家"
 }, {
  name: "7天"  
 }]
}, {
 name: "舒适",
 children: [{
  name: "智选假日"
 }, {
  name: "全季"  
 }]
}]

基于上面的数据格式,我们的实现方式如下:

<div class="list-item" v-for="(item, index) in list" :key="index">
 <div class="item-name">
 <span>{{item.name}}</span>
 </div>
 <div v-if="item.children" class="children-item">
 <div v-for="(child, index) in item.children" :key="index">
  <div class="item-name">
  <span>{{child.name}}</span>
  </div>
 </div>
 </div>
</div>

嗯,看上去非常完美,我们的列表也非常好的展现出来,大功告成。

可是突然有一天咱们的产品突然跑过来说,我们的数据现在多加了一级分类,现在变成这样子了。

list: [{
 name: "经济",
 children: [{
  name: "如家",
  children: [{
   name: "长江路-如家"
  }, {
   name: "望江路-如家"  
  }]
 }, {
  name: "7天",
  children: [{
   name: "长江路-7天"
  }, {
   name: "望江路-7天"  
  }]
 }]
}]

好吧,既然产品有需求数据有变化,那么我们就改代码吧,于是我们在原有的代码上继续加上一层嵌套循环,这次又总算完成了,但是可能没过两天我们的数据又增加了一级分类怎么办?还是继续嵌套下去?

有些同学可能就会觉得了,哪有这么多层级的数据展示,肯定不会存在的,那只能说我们太年轻,我们不排除这种存在的可能,那如果我们遇到这种情况怎么办?这里就要用到我们说的 递归组件 了,无论你的数据怎么增加我们都不用改动我们的代码。

递归组件

什么是递归组件? 简单来说就是在组件中内使用组件本身 ,下面我们就来看看如何在项目中使用递归组件去解决我们上面问题。

首先我们先创建一个 List 的递归组件

<template>
 <div>
  <div class="list-item" v-for="(item, index) in list" :key="index">
   <div class="item-name">
    <span>{{item.name}}</span>
   </div>
   <div v-if="item.children" class="children-item">
    <list :list="item.children"></list>
   </div>
  </div>
 </div>
</template>
<script>
export default {
 name: "List",
 props: {
 list: Array
 }
};
</script>

注意上面的代码中我们使用了 List 组件本身,完成这些之后,我们在外部父级组件中使用 List 组件时,不管我们的数据有多少层嵌套关系,都可以完美的自适应加载,我们再也不用通过嵌套嵌套在嵌套了。

<template>
 <div class="list-detail">
  <list :list="list"></list>
 </div>
</template>
<script>
import List from "./components/List";
export default {
 name: "Parent",
 components: { List },
 data() {
 return {
  list: [{
   name: "经济",
   children: [{
    name: "如家",
    children: [{
     name: "上江路-如家"
    },
    {
     name: "望江路-如家"
    }]
   },{
    name: "7天",
    children: [{
     name: "长江路-7天"
    },
    {
     name: "望江路-7天"
    }]
   }]
  }]
 }
 }
}
</script>

最后我们来看看渲染后的结果

Vue一个案例引发的递归组件的使用详解

总结

如上就是我们今天要说的递归组件,小伙伴们赶紧上手试试吧。

类似与信息分类的展示在我们的项目中是非常常见的形式,我们利用递归组件可以很好的去解决问题

以上所述是小编给大家介绍的Vue一个案例引发的递归组件的使用详解,希望对大家有所帮助,如果大家有任何疑问请给我留言,小编会及时回复大家的。在此也非常感谢大家对三水点靠木网站的支持!

Javascript 相关文章推荐
JavaScript原型继承之基础机制分析
Aug 26 Javascript
JQuery触发事件例如click
Sep 11 Javascript
Javascript中的五种数据类型详解
Dec 26 Javascript
jQuery获取样式中颜色值的方法
Jan 29 Javascript
jQuery实现简单的列表式导航菜单效果代码
Aug 31 Javascript
微信开发 消息推送实现代码
Oct 21 Javascript
妙用Angularjs实现表格按指定列排序
Jun 23 Javascript
微信小程序自定义键盘 内部虚拟支付
Dec 20 Javascript
生产制造追溯系统之再说条码打印
Jun 03 Javascript
element-ui table行点击获取行索引(index)并利用索引更换行顺序
Feb 27 Javascript
vue-cli3配置favicon.ico和title的流程
Oct 27 Javascript
详解JVM系列之内存模型
Jun 10 Javascript
一份超级详细的Vue-cli3.0使用教程【推荐】
Nov 15 #Javascript
Angular事件之不同组件间传递数据的方法
Nov 15 #Javascript
vue 移动端适配方案详解
Nov 15 #Javascript
在webstorm开发微信小程序之使用阿里自定义字体图标的方法
Nov 15 #Javascript
vue地址栏直接输入路由无效问题的解决
Nov 15 #Javascript
微信小程序自定义toast弹窗效果的实现代码
Nov 15 #Javascript
搭建基于express框架运行环境的方法步骤
Nov 15 #Javascript
You might like
谈谈PHP语法(4)
2006/10/09 PHP
PHP使用CURL获取302跳转后的地址实例
2014/05/04 PHP
PHP 与 UTF-8 的最佳实践详细介绍
2017/01/04 PHP
javascript 写类方式之一
2009/07/05 Javascript
jquery win 7透明弹出层效果的简单代码
2013/08/06 Javascript
js实现鼠标滑过文字链接色彩变化的效果
2015/05/06 Javascript
jquery实现Li滚动时滚动条自动添加样式的方法
2015/08/10 Javascript
js实现按钮颜色渐变动画效果
2015/08/20 Javascript
教你用javascript实现随机标签云效果_附代码
2016/03/16 Javascript
轻量级jQuery插件slideBox实现带底栏轮播(焦点图)代码
2016/03/28 Javascript
关于jQuery库冲突的完美解决办法
2017/05/20 jQuery
详解angularjs获取元素以及angular.element()用法
2017/07/25 Javascript
Linux Centos7.2下安装nodejs&amp;npm配置全局路径的教程
2018/05/15 NodeJs
vue-cli2打包前和打包后的css前缀不一致的问题解决
2018/08/24 Javascript
JavaScript实现学生在线做题计时器功能
2018/12/05 Javascript
JavaScript实现数字前补“0”的五种方法示例
2019/01/03 Javascript
JS/jQuery实现超简单的Table表格添加,删除行功能示例
2019/07/31 jQuery
js 下拉菜单点击旁边收起实现(踩坑记)
2019/09/29 Javascript
在vue中使用vuex,修改state的值示例
2019/11/08 Javascript
Ant Design的可编辑Tree的实现操作
2020/10/31 Javascript
[04:42]5分钟带你了解什么是DOTA2(第一期)
2017/02/07 DOTA
用Python从零实现贝叶斯分类器的机器学习的教程
2015/03/31 Python
Python实现的从右到左字符串替换方法示例
2018/07/06 Python
Python3中关于cookie的创建与保存
2018/10/21 Python
利用pyinstaller打包exe文件的基本教程
2019/05/02 Python
Python字符串和正则表达式中的反斜杠('\')问题详解
2019/09/03 Python
Python with关键字,上下文管理器,@contextmanager文件操作示例
2019/10/17 Python
探索欧洲最好的品牌:Bombinate
2019/06/14 全球购物
简单的大学生自我鉴定
2014/02/18 职场文书
产品陈列协议书(标准版)
2014/09/17 职场文书
教育实践活动对照检查材料
2014/09/23 职场文书
北京离婚协议书范文2014
2014/09/29 职场文书
2015年售后服务工作总结
2015/04/25 职场文书
Html5大屏数据可视化开发的实现
2021/06/11 HTML / CSS
MySQL实例精讲单行函数以及字符数学日期流程控制
2021/10/15 MySQL
一文搞清楚MySQL count(*)、count(1)、count(col)区别
2022/03/03 MySQL