由于本人近期开始学习使用vue搭建一个后端管理系统的前端项目,在左侧生成菜单树的时候遇到了一些问题。在这里记录下

分析:由于本人设定的菜单可以使多级结构,直接使用vue的v-for 遍历并不是很方便。那么这里采用递归的方式进行菜单树的生成

1.首先在使用vue-cli生成的项目中,在components下新建一个menu.vue组件。

menu.vue的内容为:

 <template>
<div class="wMenu">
<label v-for="(menu, index) in menuList"> <el-submenu v-if="menu.havingChild" :index="menu.id">
<template slot="title">
<i :class="menu.icon"></i>
<span slot="title">{{ menu.menuName }}</span>
</template>
<wMenu :menuList="menu.children"></wMenu>
</el-submenu> <el-menu-item v-if="!menu.havingChild" :index="menu.id">
<i :class="menu.icon"></i>
<span slot="title">{{ menu.menuName }}</span>
</el-menu-item>
</label>
</div>
</template> <script>
export default {
name: 'wMenu',
props: ['menuList'],
data () {
return {
}
},
methods: {
getMenuSize() {
return this.menuList.length;
}
}
}
</script> <!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped> </style>

这里需要注意的是在第10行的时候,是需要通过我们定义的组件名称调用自己,将子节点的菜单数据传入组件中,实现递归遍历。

2.接下来就要在父组件中调用,也就是我这边定义的layout.vue

首先引入要调用的组件

然后在当前组件中定义使用该组件

接下来就可以直接使用了,

完整代码请到我的github上查看 https://github.com/wylsource/vue-elementui

vue中组件之间的相互调用,及通用后台管理系统左侧菜单树的迭代生成的更多相关文章

  1. vue中组件之间的通信

    一.vue中组件通信的种类 父组件向子组件的通信 子组件向父组件的通信 隔代组件之间的通信 兄弟 组件 之间的通信 二.实现通信的方式  props vue自定义的事件 消息订阅与发布 vuex sl ...

  2. Vue中组件之间的通信方式

    vue是数据驱动视图更新的框架, 所以对于vue来说组件间的数据通信非常重要,那么组件之间如何进行数据通信的呢? 本文会介绍组件间通信的8种方式如下图所示, 并介绍在不同的场景下如何选择有效方式实现的 ...

  3. VUE 自定义组件之间的相互通信

    一.自定义组件 1.全局自定义组件 我们在var vm = new Vue({});的上面并列写上Vue.component('自定义组件名',{组件对象});来完成全局自定义组件的声明.示例代码如下 ...

  4. 前端vue框架 父组件与子组件之间的相互调用

    子组件调用父组件东西: 1.在父组件与子组件契合的标签的的template模板中绑定 v-bind:自定义一个名字=“要调用的名字” 2.在子组件的script中props:["自定义的名字 ...

  5. Vue父子组件之间的相互通信

    组件是Vue知识体系中最重要的一部分之一,父子组件由于作用域的不同,无法直接对对方的数据进行操作.它们之间的数据传递都是通过中间介质进行的,父组件给子组件传值是通过props属性,而子组件给父组件传值 ...

  6. Vue 父子组件之间的互相调用方法

    第一种方法 直接在子组件中通过this.$parent.event来调用父组件的方法 父组件 <template> <div> <child></child& ...

  7. vue中兄弟之间组件通信

    我们知道Vue中组件之间的通信有很多方式,父子之间通信比较简单,当我们使用vuex时候,兄弟组件之间的通信也很好得到解决 当我们项目较小时候,不使用vuex时候Vue中兄弟组件之间的通信是怎样进行的呢 ...

  8. Vue中组件间通信的方式

    Vue中组件间通信的方式 Vue中组件间通信包括父子组件.兄弟组件.隔代组件之间通信. props $emit 这种组件通信的方式是我们运用的非常多的一种,props以单向数据流的形式可以很好的完成父 ...

  9. JAVA和C/C++之间的相互调用。

    在一些Android应用的开发中,需要通过JNI和 Android NDK工具实现JAVA和C/C++之间的相互调用. Java Native Interface (JNI)标准是java平台的一部分 ...

随机推荐

  1. Bash shell编程的语法知识点(1)

    Bash shell脚本编程知识点如下(初学,不全,欢迎讨论补充): shell简介 脚本的简单介绍 变量和引用 算术运算 交互式编程 选择判断 条件测试 循环 函数 shell简介 shell是一种 ...

  2. 单独mybatis得使用

    今天同学说要学习mybatis后来他写了个程序让我看看,我看了一下发现包引错了,他写的是单独的mybatis,引入的却是spring-mybatis,所以会报错. 今天我记录一下单独mybatis的使 ...

  3. Struts2思维导图

    自己感觉自己的知识不是很扎实,所以昨天留时间复习知识,昨天边复习边画了一个思维导图.不知道自己画的对不对,还没有画完.有错的地方大家请和我说.希望自己能更加牢固的记住这些知识. 不说废话,开图.图有点 ...

  4. Winform应用程序实现通用遮罩层二

    之前先后发表过:<Winform应用程序实现通用遮罩层>.<Winform应用程序实现通用消息窗口>,这两款遮罩层其实都是基于弹出窗口的,今天为大家分享一个比较简单但界面相对友 ...

  5. 如何一条sql语句查找表中第二大值

    例1: 一个Customer表,一个字段Value,现请问如何查到Value中第二大的值 select max(value) from Customer where value < (selec ...

  6. ASP.NET 设计模式:应用程序分层与关注点分离(SoC)

    应用程序分层设计 应用程序分层属于关注点分离的一种形式,可以通过命名空间.文件夹或采用单独的项目来实现. 下图为一个采用分层设计的项目结构 ASPPatterns.Chap3.Layered.Repo ...

  7. C# war3 巨魔精灵 minimap

    弃坑LOL后,无聊的时候玩玩 war3的RPG地图,巨魔与精灵.  玩了一段时间精灵....然后玩魔结果总是找不到人.所以就有了这个想法. 代码纯粹靠搬运. 说下原理,网上有份代码,可以查看当前选中目 ...

  8. hdf5 AttributeError: 'UnImplemented' object has no attribute 'read'

    问题现象:最近在用pandas分析数据时,用hdf5存储结果,当我监听不同文件时,多个进程同时写入hdf5(save到不同group)时,报hdf5 AttributeError: 'UnImplem ...

  9. React Native学习(一)——搭建开发环境

    第一次接触React Native,首先搭建环境,过程还算顺利,不过也遇到了些问题,这里简单记录下来.中文官网(http://reactnative.cn/docs/0.47/getting-star ...

  10. 关于 AutomationProperties.Name 的一些总结

    在 XAML 代码中,我们偶尔会看到 AutomationProperies 的代码,如 AutomationProperties.Name="xxxxx", Automation ...