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

父组件:slotDemo.vue:

<template>
<div>
<!-----递归组件----->
<ul>
<simple3 :tree="item" v-for="item in tree"></simple3>
</ul> </div>
</template>
<style lang="stylus" rel="stylesheet/stylus">
li
padding-left 30px
</style>
<script>
import simple3 from "./simple/simple3.vue";
export default{
data(){
return {
tree: [{
label: "一级菜单",
test:1,
children: [{
label: "二级菜单",
test:2,
children: [{
label: "三级菜单",
test:3
}]
}]
}]
}
}, components: { simple3
}
}
</script>

  子组件:simple3.vue

<template>
<li>
<a>{{tree.label}}</a>
<simple3 v-if="tree.children" :tree="item" v-for="item in tree.children" :class="item.test==2?'test2':'test3'"></simple3> </li>
</template>
<style rel="stylesheet/stylus" lang="stylus">
.test2
list-style disc .test3
list-style decimal
</style>
<script>
export default{
name: "simple3",
props: ["tree"]
}
</script>

  

上面是一个子组件,定义了 name 为 simple03,然后在模板中调用自身,结合 v-for 实现递归

为了防止出现死循环,在调用自身的时候,加入了 v-if 作为判定条件

父组件中调用的时候,需要通过 props 传入一个 tree;

为了对每一级菜单有所区分,我对tree里面的每一个子集合里面加了一个test字段来区分是哪一级的菜单然后对其不同的样式进行处理

最后的效果:

vue的递归组件以及三级菜单的制作的更多相关文章

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

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

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

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

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

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

  4. 谈谈Vue的递归组件

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

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

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

  6. vue笔记 递归组件的使用

    递归组件 什么是递归组件? 组件自身去调用组件自身. 代码示例 DetailList.vue(子组件-递归组件) <template> <div> <div class= ...

  7. vue中递归组件的使用

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

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

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

  9. vue第十单元(动态组件 keep-alive(钩子函数) 递归组件(name) 组件命名约定)

    第十单元(动态组件 keep-alive(钩子函数) 递归组件(name) 组件命名约定) #课程目标 熟练掌握动态组件的实现 掌握keep-alive缓存组件,以及相应的钩子函数 熟练掌握递归组件, ...

随机推荐

  1. Redis总结(七)Redis运维常用命令(转载)

    redis 服务器端命令 redis 127.0.0.1:6380> time  ,显示服务器时间 , 时间戳(秒), 微秒数 1) "1375270361" 2) &quo ...

  2. 迭代器类vector::iterator 和 vector::reverse_iterator 的实现、迭代器类型、常用的容器成员

    一.迭代器 迭代器是泛型指针 普通指针可以指向内存中的一个地址 迭代器可以指向容器中的一个位置 STL的每一个容器类模版中,都定义了一组对应的迭代器类.使用迭代器,算法函数可以访问容器中指定位置的元素 ...

  3. 【web开发学习笔记】Struts-Tags学习笔记1 - 通用标签和控制标签

    通用标签和控制标签 第一部分.代码 //前端 <html> <head> <meta http-equiv="Content-Type" conten ...

  4. ubuntu环境下配置jdk

    方法1:修改/etc/profile 文件 /etc/profile:在登录时,操作系统定制用户环境时使用的第一个文件,此文件为系统的每个用户设置环境信息,当用户第一次登录时,该文件被执行. 所有用户 ...

  5. Android 利用fastjson进行json解析

    package com.example.FastJson.util; import com.alibaba.fastjson.JSON; import com.alibaba.fastjson.Typ ...

  6. Cocoa、Foundation、UIKit、Objective-c、XCode、Interface Builder的概念

    转自:http://blog.csdn.net/hou_cocoa/article/details/6187418 Cocoa 是在Mac OS X系统上原生的一个编译环境.他包含两个框架,其实就是一 ...

  7. CEffectMgr类

    #ifndef __EFFECTMGR_H__ #define __EFFECTMGR_H__ #include "GameFrameHead.h" namespace cocos ...

  8. poj3693(后缀数组)

    http://poj.org/problem?id=3693 题意:给出一串字符,需要求这串字符中的最长重复子串,要是有多个,输出字典序最小的......... 我自己的一些想法:这个思路我一开始倒是 ...

  9. Spring的AOP简单理解

    最近在研究spring的AOP,翻译出来的意思是面向切面. 总结如下: 所谓AOP就是将分散在各个方法处的公共代码提取到一处, 并通过类似拦截器的机制实现代码的动态整合.可以简单地想象成, 在某个方法 ...

  10. OpenCV使用标定图

    本文由 @lonelyrains 出品,转载请注明出处.  文章链接: http://blog.csdn.net/lonelyrains/article/details/46915705 上一步生成标 ...