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 相关文章推荐
document.createElement()用法
Mar 13 Javascript
js过滤HTML标签以及空格的思路及代码
May 24 Javascript
如何使用jQUery获取选中radio对应的值(一句代码)
Jun 03 Javascript
javascript函数式编程实例分析
Apr 25 Javascript
jQuery EasyUI基础教程之EasyUI常用组件(推荐)
Jul 15 Javascript
Angularjs的Controller间通信机制实例分析
Nov 07 Javascript
Angular整合zTree的示例代码
Jan 24 Javascript
小程序卡片切换效果组件wxCardSwiper的实现
Feb 13 Javascript
JS实现烟花爆炸效果
Mar 10 Javascript
微信小程序wx.getUserInfo授权获取用户信息(头像、昵称)的实现
Aug 19 Javascript
mustache.js实现首页元件动态渲染的示例代码
Dec 28 Javascript
解决vue项目本地启动时无法携带cookie的问题
Feb 06 Vue.js
一份超级详细的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
一个用php3编写的简单计数器
2006/10/09 PHP
PHP函数学习之PHP函数点评
2012/07/05 PHP
PHP删除HTMl标签的实现代码
2013/06/30 PHP
Laravel5框架添加自定义辅助函数的方法
2018/08/01 PHP
JavaScript Undefined,Null类型和NaN值区别
2008/10/22 Javascript
TreeView 用法(有代码)(asp.net)
2011/07/15 Javascript
ASP.NET jQuery 实例14 在ASP.NET form中校验时间范围
2012/02/03 Javascript
关于锚点跳转及jQuery下相关操作与插件
2012/10/01 Javascript
jquery根据name属性查找的小例子
2013/11/21 Javascript
前台js对象在后台转化java对象的问题探讨
2013/12/20 Javascript
js二维数组定义和初始化的三种方法总结
2014/03/03 Javascript
js处理表格对table进行修饰
2014/05/26 Javascript
jQuery中[attribute^=value]选择器用法实例
2014/12/31 Javascript
简单好用的nodejs 爬虫框架分享
2017/03/26 NodeJs
JS简单获取日期相差天数的方法
2017/04/24 Javascript
babel之配置文件.babelrc入门详解
2018/02/22 Javascript
Vue-cli项目获取本地json文件数据的实例
2018/03/07 Javascript
Layer弹出层动态获取数据的方法
2018/08/20 Javascript
解决vue点击控制单个样式的问题
2018/09/05 Javascript
ES6中Symbol、Set和Map用法详解
2019/08/20 Javascript
深入了解JavaScript词法作用域
2020/07/29 Javascript
vue cli3.0打包上线静态资源找不到路径的解决操作
2020/08/03 Javascript
js操作两个json数组合并、去重,以及删除某一项元素
2020/09/22 Javascript
ant design vue嵌套表格及表格内部编辑的用法说明
2020/10/28 Javascript
[03:16]DOTA2完美大师赛小组赛精彩集锦
2017/11/22 DOTA
Python压缩解压缩zip文件及破解zip文件密码的方法
2015/11/04 Python
详解Python 装饰器执行顺序迷思
2018/08/08 Python
python web自制框架之接受url传递过来的参数实例
2018/12/17 Python
解决pycharm回车之后不能换行或不能缩进的问题
2019/01/16 Python
html5 canvas移动浏览器上实现图片压缩上传
2016/03/11 HTML / CSS
Ajxa常见问题都有哪些
2014/03/26 面试题
门卫岗位安全职责
2013/12/13 职场文书
小学生自我评价范文
2014/01/25 职场文书
分公司经理任命书
2014/06/05 职场文书
创建绿色社区汇报材料
2014/08/22 职场文书
天鹅湖观后感
2015/06/09 职场文书