Vue一个案例引发的递归组件的使用使用说明_递归使用说明

今天我们继续使用 Vue 的撸我们的实战项目,只有在实战中我们才会领悟更多,光纸上谈兵然并卵,继上篇我们的《Vue一个案例引发的动态组件与全局事件绑定总结》 之后,今天来聊一聊我们如何在项目中使用递归组件。信息的分类展示列表这次我们主要是实现一个信息的分类展示列表存在二级/三级的分类,如下如所示:看到这个很多人会想到这个实现起来很简单啊,来个嵌套循环不就完事

Vue一个案例引发的递归组件的使用使用说明

今天我们继续使用 Vue 的撸我们的实战项目,只有在实战中我们才会领悟更多,光纸上谈兵然并卵,继上篇我们的《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一个案例引发的递归组件的使用使用说明_递归使用说明

总结

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

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

来源:https://www.cnblogs.com/beevesnoodles/archive/2018/11/15/9966352.html

海计划公众号
(0)
上一篇 2020/04/03 19:35
下一篇 2020/04/03 19:35

您可能感兴趣的内容

  • Nginx常用功能基础知识入门_nginx小白基础

    nginx作为一个高性能的web服务器,想必大家垂涎已久,蠢蠢欲动,想学习一番了吧,语法不多说,网上一大堆。下面博主就nginx的非常常用的几个功能做一些讲述和分析,学会了这几个功能,平常的开发和部署就不是什么问题了。因此希望大家看完之后,能自己装个nginx来学习配置测试,这样才能真正的掌握它。文章提纲:正向代理反向代理透明代理负载均衡静态服务器nginx

    2020/03/24
  • 前端工程化:构建、部署、灰度小白帮助_工程化小白指南

    优秀的技术方案很多,大部分时候我们感觉只是在现有技术方案里面做排列组合、求笛卡尔积、选择最优解,做出一个最适合当前项目的方案。未来,人类应该编写最核心的业务代码、设置规则,由云端和AI来根据当前项目情况自动选择和调整到最优的架构和方案。前言前端项目的工程化,不只对开发层面的组件化、模块化、规范化等,更涉及到构建、部署的工程化和自动化。工程化的一些概念,编译、

    2020/03/26
  • 前端度菜鸟攻略_关注web前端开发、前端资源

    前端度菜鸟攻略 官方网址:http://qianduandu.com/ 简介描述:关注web前端开发、前端资源 关注Web前端开发; 实时更新最新前端开发技术,为用户提供各种最实用…

    2020/03/11
  • ES6 Promise实战练习题目基础入门_Promise小白知识

    俗话说得好,一动不动是王八,上一篇文章学习了那么久Promise,是时候大显身手了!基础题题一const promise = new Promise((resolve, reject) => {console.log(1)resolve()console.log(2)
    })
    promise.then(() => {console.log(3)
    })
    cons

    2020/03/23
  • Vue项目使用CDN优化首屏加载菜鸟攻略_vue菜鸟指南

    前言作为一个网站应用,加载速度是非常重要的。加载速度,一个是程序的合理安排,如以组件按需加载,一个是js、css等资源的异步加载。在Vue项目中,引入到工程中的所有js、css文件,编译时都会被打包进vendor.js,浏览器在加载该文件之后才能开始显示首屏。若是引入的库众多,那么vendor.js文件体积将会相当的大,影响首开的体验。解决方法是,将引用的外

    2020/04/03
  • BearCss使用指南是一个免费的Web应用程序

    BearCss指南攻略 官方网址:http://bearcss.com/ 简介描述:是一个免费的Web应用程序 BearCss是一个免费的Web应用程序,需要你上传一份HTML文档…

    2020/03/06
  • Web 设计的CSS 工具有哪些?小白基础_工具小白知识

    当涉及到简化 CSS 设计和开发相关的工作时,工具总能创造奇迹。值得指出的是,绝大多数的网页设计者和开发人员对不同的 CSS 工具都感到兴奋,这些工具能帮助他们更快的制作功能完善又十分完美的网站和网页应用。下面给大家介绍几个CSS工具,它们将通过最大限度的发挥 CSS 的功能来帮助你建立神奇的网站。1、SpritePadSpritePad 是另一个创建 CS

    2020/03/23
  • 软件架构师之路使用说明_架构小白教程

    什么是软件架构?软件架构师是一名软件开发专家,他可以进行高层设计选择并决定技术标准,包括软件编码标准,工具和平台。(出处: 维基百科:软件架构师)软件架构(architecture)是一个系统的基本组织,由其组件、它们之间的相互关系和环境以及决定系统设计和演化的原则来表示。(出处: 软件架构手册)软件架构的层次软件架构可以被抽象的分为几个层次,不同的层次对技

    2020/03/20
  • 解决页面刷新redux数据丢失问题新手入门_redux零基础入门

    解决页面刷新redux数据丢失问题新手入门 概念 对于目前普遍的“单页应用”,其中的好处是,前端可以从容的处理较复杂的数据模型,同时基于数据模型可以进行变换,实现更为良好的交互操作…

    2020/03/19
  • video.js使用技巧基础知识教程_插件菜鸟知识

    1 初始化Video.js初始化有两种方式。1.1 标签方式一种是在

    2020/03/26
  • 网站设计如何才能更符合企业需求基础教程_需求入门基础教程

    如果想要建立企业的网站,但还没有决定选择哪个平台?为小型企业需求选择合适的网站设计平台并非易事,而且尤其是如此多的建站平台就更难抉择了,企业创建网站的初衷是吸引世界各地数百万的关注和打响企业品牌,并且以此获得更多客户和订单,所以企业可以从这些要求中找到合适的网站设计平台,那么网站设计如何才能更符合企业需求?1、网页设计 网页设计对小型企业网站非常重要,

    2020/03/23
  • Vue3解决问题之Proxy在Vue中的作用基础教程_Proxy攻略教程

    前言在讲解Proxy之前,我们有些前置知识点是必要掌握的:Object相关静态函数Reflect相关静态函数简单说明知识盲点名称介绍Object.isExtensible()方法判断一个对象是否是可扩展的(是否可以在它上面添加新的属性)Object.setPrototypeOf()方法设置一个指定的对象的原型 ( 即, 内部[[Prototype]]属性)到

    2020/03/20
  • Web 前端中的增强现实(AR)开发技术新手入门_web作者: GeekPlux基础知识入门

    本文作者 GeekPlux,首发于前端外刊评论-Web 前端中的增强现实(AR)开发技术,博客地址:http://geekplux.com/2018/01/18/augmented-reality-development-tech-in-web-frontend.html。注明作者和地址即可转载。增强现实(以下简称 AR)浪潮正滚滚而来,Web 浏览器作为人

    2020/04/05
  • 在ios端点击按钮闪烁解决方法菜鸟教程网_问题小白攻略

    在ios端,safari浏览器上触发click事件有300ms的延迟响应,为touch添加的样式会和click冲突而出现闪烁问题在safari中触摸事件的相应顺序如下:touchstart –> touchmove –> touchend –> click(300ms)此时可试用以下样式取消click事件的默认样式来消除页面闪烁问题*{-webkit-

    2020/03/26
  • input文本框强制输入指定文字的方法以及IE11的兼容菜鸟教程_input入门教程

    背景:最近开发的韩国项目,在用户姓名输入框一栏中,要求只能输入韩文,通常用到onkeyup和onafterpaste两个事件来触发方法,并在方法中进行校验,但是在IE浏览器中,出现了一种情况,就是韩文单词拼写未完成的时候,会直接进行校验并显示,并不是需要想要的结果,所以需要进行IE兼容;记录一下整个流程:标签绑定事件<input type="text" v-

    2020/03/31
  • Jquery插件开发的方法总汇入门攻略_Jquery指南教程

    jquery插件是用来扩展jquery对象的一种方法,它的使用方法是通过jquery对象$来调用。其中Jquery插件开发一共有三种方式:$.extend()来扩展jQuery ,主要用于向jquery对象添加静态方法$.fn 向jQuery添加新的方法 , 这里的fn等价于prototype,在jquery原型链上添加$.widget()应用jQuery

    2020/04/05