递归组件

什么是递归组件?

组件自身去调用组件自身。

代码示例

DetailList.vue(子组件-递归组件)

<template>
<div>
<div class="item" v-for="(item,index) of list" :key="index"> <div class="item-title border-bottom">
<span class="item-title-icon"></span>
{{item.title}}
</div>
<!--递归组件:DetailList调用自身-->
<div v-if="item.children" class="item-children">
<detail-list :list="item.children"></detail-list>
</div> </div>
</div>
</template>

Detail.vue(父组件)

<template>
<div>
<detail-banner></detail-banner>
<detail-header></detail-header>
<div class="content">
<detail-list :list="list"></detail-list>
</div>
</div>
</template>
<script>
import DetailBanner from './components/Banner.vue'
import DetailHeader from './components/Header.vue'
import DetailList from './components/List.vue'
export default{
name: 'Detail',
components: {
DetailBanner,
DetailHeader,
DetailList
},
data(){
return {
list: [{
title: '成人票',
children: [{
title: '成人3馆联票',
children: [{title: '成人3馆联票-成都'}, {title: '成人3馆联票-上海'}, {title: '成人3馆联票-北京'}, {title: '成人3馆联票-河南'}]
}, {
title: '成人4馆联票'
}, {
title: '成人5馆联票'
}, {
title: '成人6馆联票'
}]
}, {
title: '学生票'
}, {
title: '儿童票'
}, {
title: '特惠票'
}]
}
}
}
</script>

注意:父组件中的数据结构是二维数组。子组件调用自身之后,对于css样式,我们只要仅仅关注一级列表即可,二级列表会自动使用相同的样式。如图:

vue笔记 递归组件的使用的更多相关文章

  1. 【Vue.js实战案例】- Vue.js递归组件实现组织架构树和选人功能

    大家好!先上图看看本次案例的整体效果. 浪奔,浪流,万里涛涛江水永不休.如果在jq时代来实这个功能简直有些噩梦了,但是自从前端思想发展到现在的以MVVM为主流的大背景下,来实现一个这样繁杂的功能简直不 ...

  2. 谈谈Vue的递归组件

    2月最后一天,而且还四年一遇,然而本月居然一篇博客没写,有点说不过去.所以,今天就来谈谈Vue的递归组件.我们先来看一个例子: See the Pen 递归组件 by imgss (@imgss) o ...

  3. Vue.js 递归组件实现树形菜单

    最近看了 Vue.js 的递归组件,实现了一个最基本的树形菜单. 项目结构: main.js 作为入口,很简单: import Vue from 'vue' Vue.config.debug = tr ...

  4. vue的递归组件以及三级菜单的制作

    js里面有递归算法,同时,我们也可以利用props来实现vue模板的递归调用,但是前提是组件拥有 name 属性 父组件:slotDemo.vue: <template> <div& ...

  5. 用Vue.js递归组件构建一个可折叠的树形菜单

    在Vue.js中一个递归组件调用的是其本身,如: Vue.component('recursive-component', {   template: `<!--Invoking myself! ...

  6. Vue.js递归组件实现动态树形菜单

    使用Vue递归组件实现动态菜单 现在很多项目的菜单都是动态生成的,之前自己做项目也是遇到这种需求,翻看了官网案例,和网上大神的案例.只有两个感觉,官网的案例太简洁,没有什么注释,看起来不太好理解,大神 ...

  7. vue中递归组件的使用

    2019独角兽企业重金招聘Python工程师标准>>> 递归 简单来讲就是程序自己调用自身. vue中的递归组件就是,组件自身调用自身. 父组件 <template> & ...

  8. vue之递归组件实现树形目录

    递归组件的应用===>可以通过组件命名来自己使用自己的组件 实例如下 父组件 <div class="content"> <detail-list :lis ...

  9. 1、vue 笔记之 组件

    1.组件个人理解:  <组件>是页面的一部分,将界面切分成部分,每部分称为 <组件>   2.组件化思想:          //2.1.定义一个全局的组件,组件支持‘驼峰命名 ...

随机推荐

  1. stm8开发环境

    网上大致有两种环境: 1.stvp+stvd 也就是st自家的sttoolsetpack包 stvd的界面有点古板,有点像vc++6.0,具体使用感觉怎样我也不知道,我没有使用这个环境. stvp这个 ...

  2. Linux——浅析信号处理

    信号及其处理 信号处理是Unix和LInux系统为了响应某些状况而产生的事件,通常内核产生信号,进程收到信号后采取相应的动作. 例如当我们想强制结束一个程序的时候,我们通常会给它发送一个信号,然后该进 ...

  3. vs2015 key

    vs2015 企业版 专业版 密钥   亲测可用 专业版:HMGNV-WCYXV-X7G9W-YCX63-B98R2企业版:HM6NR-QXX7C-DFW2Y-8B82K-WTYJV

  4. OpenApi开放平台架构实践

    背景 随着业务的发展,越来越多不同系统之间需要数据往来,我们和外部系统之间产生了数据接口的对接.当然,有我们提供给外部系统(工具)的,也有我们调用第三方的.而这里重点讲一下我们对外的接口. 目前,我们 ...

  5. 第四章 MySQL数据类型和运算符

    5.1 MySQL数据类型介绍 一.数据类型简介 (1) 数据表由多列字段构成,每一个字段指定了不同的数据类型,指定了数据类型之后,也就决定了向字段插入的数据内容 (2) 不同的数据类型也决定了 My ...

  6. Executor, ExecutorService 和 Executors 间的区别与联系

    UML简要类图关系: 下面详细看一下三者的区别: Executor vs ExecutorService vs Executors 正如上面所说,这三者均是 Executor 框架中的一部分.Java ...

  7. git - 简明指南

    助你入门 git 的简明指南,木有高深内容 ;) 作者:罗杰·杜德勒 感谢:@tfnico, @fhd 和 Namics如有纰漏,请在 github 提报问题 安装 下载 git OSX 版 下载 g ...

  8. PAT1120: Friend Numbers

    1120. Friend Numbers (20) 时间限制 400 ms 内存限制 65536 kB 代码长度限制 16000 B 判题程序 Standard 作者 CHEN, Yue Two in ...

  9. js判断浏览器是否支持flash的方法

    传统浏览器可以使用window.ActiveXObject检查浏览器是否启用相关的控件.检查浏览器是否启用flash控件,需要先检查浏览器是否支持ActiveXObject,可以使用typeof检查w ...

  10. 我珍藏的神兵利器 - 效率工具for Win[转]

        工欲善其事必先利其器. 我一直都在不断挑选和优化自己的兵器,以追求着最高效率. 此篇分享下我的私家珍藏的各种神兵利器.如果有朋友能推荐更好的,那就不枉此篇. 分为Windows软件和开发工具两 ...