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

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">lipadding-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">.test2list-style disc.test3list-style decimal
</style>
<script>export default{name: "simple3",props: ["tree"]}
</script>

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

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

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

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

最后的效果：

转载于:https://www.cnblogs.com/mmykdbc/p/8037995.html

vue的递归组件以及三级菜单的制作相关推荐

vue的动画封装，vue的递归组件
在项目中,许多地方会使用到类似的动画,所以我们封装起来会好点,我们先创建一个组件,用来设置它的动画效果, <template><transition name="fade& ...
vue树形权限菜单_Vue.js 递归组件实现树形菜单（实例分享）
最近看了 Vue.js 的递归组件,实现了一个最基本的树形菜单. 项目结构: main.js 作为入口,很简单: import Vue from 'vue' Vue.config.debug = tr ...
vue树形权限菜单_Vue.js 递归组件实现树形菜单
最近看了 Vue.js 的递归组件,实现了一个最基本的树形菜单. main.js 作为入口: import Vue from 'vue' import main from './components/ ...
vue 循环递归组件_Vue一个案例引发的递归组件的使用
今天我们继续使用 Vue 的撸我们的实战项目,只有在实战中我们才会领悟更多,光纸上谈兵然并卵,继上篇我们的<Vue一个案例引发的动态组件与全局事件绑定总结> 之后,今天来聊一聊我们如何在项 ...
ABP实践(5)-abp前端vue框架之IView实现三级菜单(博友需要特此分享)
为响应博友想要知道三级菜单怎么实现本篇文章先介绍三级菜单的实现,后续再分享其他部分内容 1 修改菜单组件sidebarMenu.vue 图为原代码和修改后代码比对修改前后的源码如下 <styl ...
vue 循环递归组件_全局组件实现递归树，避免循环引用
概述目录分类展示会通常要用到树形结构.本例结合vue的父子组件,采用递归渲染,实现一个基于树的curd小demo 知识点父子组件递归渲染 class 样式对象写法,CSS伪元素 ::before ...
vue html模板递归,vue使用递归组件实现多级列表
一.背景需求在页面上渲染一个多级列表的时候,数据往往也具有多个层级例如:数组的每个元素都是一个对象,对象中的value可能是一个数组 { "ret": true, " ...
vue中递归组件实现多级列表
一.递归组件的概念递归组件: 递归组件简单来说在组件内使用组件本身.这个在vue的项目开发中也是比较常见的.对于一些多级的数据嵌套,如果对于每一层数据都进行for循环嵌套,那会非常繁琐,也很不方便. ...
AXURE8.0制作二级菜单和三级菜单
今日分享:用AXURE8.0制作二级菜单和三级菜单二级菜单操作思路:首先做出一个[一级菜单]和三个[二级菜单],完成后再复制多个[一级菜单]和[二级菜单] 第一步:拖一个矩形,作为[一级菜单],命 ...

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

vue的递归组件以及三级菜单的制作相关推荐

最新文章

热门文章