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. laravel使用的模板引擎 blade

    使用blade引擎的话必须在控制器中使用use   Blade

  2. 移动UI设计中需要避免的四种常见用户体验误区

    2012年移动应用的下载量超过300 亿,可是智能手机用户平均每周会使用的应用数却大概只有15个.更糟的是,Localytics 的研究表明,大概有22%的应用是见光死,用过一次之后就被束之高阁.既然 ...

  3. c#通过FileStream读取、写入文件

    网上找过一些FileStream读取写入文件的代码,但是都有些小问题. 于是自己整理一下,以备不时之需.说明一下,以下代码我都运行过. 1.FileStream读取文件 // FileStream读取 ...

  4. C与C++中非常少犯的错误,犯了后却非常难找出的错误

    1.continue,break类的错误(HDU1877): #include<iostream> using namespace std; int main() { int a,b,m, ...

  5. C# Debug

    语法.IDE环境使用.Debug方法是学习一门语言的最少必须技能,本文总结C#中的最常用调试方法 一. 断点 如下图所示在欲插入断点的地方右键>断点>插入断点(或在行号左边点击)可在选中语 ...

  6. 剑指offer代码 vs2013执行

    方法: 代码文件夹名称为:CodingInterviewChinese2-master 1. 用vs2013加载解决方案 .sln文件 2. 一个解决方案下面有多个项目,通过右键解决方案->属性 ...

  7. atitit。gui 界面皮肤以及换肤总结 java .net c++

    atitit.gui 界面皮肤以及换肤总结 java .net c++ 1. Swing 的皮肤 1 1.1. windows风格 1 1.2. Mac风格 ( liquid 框架) 1 2. 如何给 ...

  8. C数据结构-栈和队列,括号匹配举例---ShinePans

    1.栈和队列是两种特殊的线性表             运算操作被限定仅仅能在表的一端或两端插入,删除元素,故也称它们为限定的线性表结构 2.栈的基本运算 1).Stackinit(&s) 构 ...

  9. python内置函数之dict()

    class dict(**kwargs) 返回一个字典.本方法用来创建一个字典对象.只能传入一个参数. >>> dict(a=1) {'a': 1} 也可以传入映射函数作为参数 &g ...

  10. 02、获取 WebView 控件中,加载的 HTML 网页内容

    在开发 app 的时候,WebView 是经常使用的控件.而且有时需要向 WebView 中的 html 内容 注入额外的 js 进行操作.这里记录一下在当前 WebView 控件中,获取 html ...