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 相关文章推荐
2010年最佳jQuery插件整理
Dec 06 Javascript
深入理解Javascript作用域与变量提升
Dec 09 Javascript
js正则表达exec与match的区别说明
Jan 29 Javascript
JavaScript中String.match()方法的使用详解
Jun 06 Javascript
深入理解JavaScript中的箭头函数
Jul 28 Javascript
Node.js数据库操作之查询MySQL数据库(二)
Mar 04 Javascript
Javascript 实现匿名递归的实例代码
May 25 Javascript
JavaScript之排序函数_动力节点Java学院整理
Jun 30 Javascript
axios发送post请求springMVC接收不到参数的解决方法
Mar 05 Javascript
微信小程序实现省市区三级地址选择
Jun 21 Javascript
简单了解JavaScript异步
May 23 Javascript
JavaScript 截取字符串代码实例
Sep 05 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
rrmdir php中递归删除目录及目录下的文件
2011/05/15 PHP
php递归法读取目录及文件的方法
2015/01/30 PHP
常用的php图片处理类(水印、等比缩放、固定高宽)分享
2015/06/19 PHP
php实现文件上传基本验证
2020/03/04 PHP
JavaScript模板入门介绍
2012/09/26 Javascript
jQuery实现鼠标划过添加和删除class的方法
2015/06/26 Javascript
浅谈angularJS 作用域
2015/07/05 Javascript
JS组件中bootstrap multiselect两大组件较量
2016/01/26 Javascript
快速掌握Node.js中setTimeout和setInterval的使用方法
2016/03/21 Javascript
js表单验证实例讲解
2016/03/31 Javascript
Angular.JS利用ng-disabled属性和ng-model实现禁用button效果
2017/04/05 Javascript
使用JS实现图片轮播的实例(前后首尾相接)
2017/09/21 Javascript
基于jQuery实现定位导航位置效果
2017/11/15 jQuery
vue、react等单页面项目应该这样子部署到服务器
2018/01/03 Javascript
详解JavaScript对数组操作(添加/删除/截取/排序/倒序)
2019/04/28 Javascript
[49:08]完美世界DOTA2联赛PWL S2 LBZS vs FTD.C 第一场 11.27
2020/12/01 DOTA
Python正则表达式介绍
2012/08/06 Python
Python矩阵常见运算操作实例总结
2017/09/29 Python
Python中的groupby分组功能的实例代码
2018/07/11 Python
python使用Matplotlib绘制分段函数
2018/09/25 Python
对python Tkinter Text的用法详解
2018/10/11 Python
Python实现监控Nginx配置文件的不同并发送邮件报警功能示例
2019/02/26 Python
python实现图片中文字分割效果
2019/07/22 Python
Python中turtle库的使用实例
2019/09/09 Python
pytorch GAN伪造手写体mnist数据集方式
2020/01/10 Python
使用Python将Exception异常错误堆栈信息写入日志文件
2020/04/08 Python
Python调用jar包方法实现过程解析
2020/08/11 Python
总结30个CSS3选择器
2017/04/13 HTML / CSS
canvas实现圆绘制的示例代码
2019/09/11 HTML / CSS
linux面试题参考答案(10)
2016/10/26 面试题
读群众路线心得体会
2014/03/07 职场文书
学校运动会广播稿100条
2014/09/14 职场文书
毕业赠语大全
2015/06/23 职场文书
MySQL中使用or、in与union all在查询命令下的效率对比
2021/05/26 MySQL
java设计模式--建造者模式详解
2021/07/21 Java/Android
python利用while求100内的整数和方式
2021/11/07 Python