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 相关文章推荐
window.onresize 多次触发的解决方法
Nov 08 Javascript
JS自动倒计时30秒后按钮才可用(两种场景)
Aug 31 Javascript
Node.js中Request模块处理HTTP协议请求的基本使用教程
Mar 31 Javascript
Bootstrap面板学习使用
Feb 09 Javascript
Sublime Text新建.vue模板并高亮(图文教程)
Oct 26 Javascript
bootstrap table sum总数量统计实现方法
Oct 29 Javascript
vue使用Element组件时v-for循环里的表单项验证方法
Jun 28 Javascript
详解javascript appendChild()的完整功能
Aug 18 Javascript
Vue.js自定义指令学习使用详解
Oct 19 Javascript
小程序跨页面交互的作用与方法详解
Jan 07 Javascript
vue项目实现减少app.js和vender.js的体积操作
Nov 12 Javascript
JavaScript 语句之常用 for 循环详解
Mar 29 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
ftp类(myftp.php)
2006/10/09 PHP
正则表达式语法
2006/10/09 Javascript
MySql中正则表达式的使用方法描述
2008/07/30 PHP
学习php中的正则表达式
2014/08/17 PHP
php简单随机字符串生成方法示例
2017/04/19 PHP
PHP反射原理与用法深入分析
2019/09/28 PHP
JQuery扩展插件Validate 5添加自定义验证方法
2011/09/05 Javascript
使用GruntJS构建Web程序之构建篇
2014/06/04 Javascript
jQuery+html5+css3实现圆角无刷新表单带输入验证功能代码
2015/08/21 Javascript
jQuery插件实现文字无缝向上滚动效果代码
2016/02/25 Javascript
详解 vue.js用法和特性
2017/10/15 Javascript
angularjs实现天气预报功能
2020/06/16 Javascript
javascript面向对象三大特征之继承实例详解
2019/07/24 Javascript
JS实现网站楼层导航效果代码实例
2020/06/16 Javascript
JavaScript中数组去重的5种方法
2020/07/04 Javascript
Python使用py2exe打包程序介绍
2014/11/20 Python
Python httplib模块使用实例
2015/04/11 Python
Python素数检测的方法
2015/05/11 Python
浅谈Python2.6和Python3.0中八进制数字表示的区别
2017/04/28 Python
python实现的二叉树定义与遍历算法实例
2017/06/30 Python
使用python实现链表操作
2018/01/26 Python
Python实现获取系统临时目录及临时文件的方法示例
2019/06/26 Python
关于python导入模块import与常见的模块详解
2019/08/28 Python
python使用socket 先读取长度,在读取报文内容示例
2019/09/26 Python
pandas DataFrame 数据选取,修改,切片的实现
2020/04/24 Python
如何在Windows中安装多个python解释器
2020/06/16 Python
Python Sqlalchemy如何实现select for update
2020/10/12 Python
LivingSocial爱尔兰:爱尔兰本地优惠
2018/08/10 全球购物
传播学专业毕业生自荐书
2014/07/01 职场文书
小班下学期个人总结
2015/02/12 职场文书
自主招生学校推荐信范文
2015/03/26 职场文书
日本读研:怎样写好一篇日本研究计划书?
2019/07/15 职场文书
Golang 使用Map实现去重与set的功能操作
2021/04/29 Golang
Python 中 Shutil 模块详情
2021/11/11 Python
python ConfigParser库的使用及遇到的坑
2022/02/12 Python
德劲DE1107指针试高灵敏度全波段收音机机评
2022/04/05 无线电