vue中组件之间的相互调用,及通用后台管理系统左侧菜单树的迭代生成
由于本人近期开始学习使用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中组件之间的相互调用,及通用后台管理系统左侧菜单树的迭代生成的更多相关文章
- vue中组件之间的通信
一.vue中组件通信的种类 父组件向子组件的通信 子组件向父组件的通信 隔代组件之间的通信 兄弟 组件 之间的通信 二.实现通信的方式 props vue自定义的事件 消息订阅与发布 vuex sl ...
- Vue中组件之间的通信方式
vue是数据驱动视图更新的框架, 所以对于vue来说组件间的数据通信非常重要,那么组件之间如何进行数据通信的呢? 本文会介绍组件间通信的8种方式如下图所示, 并介绍在不同的场景下如何选择有效方式实现的 ...
- VUE 自定义组件之间的相互通信
一.自定义组件 1.全局自定义组件 我们在var vm = new Vue({});的上面并列写上Vue.component('自定义组件名',{组件对象});来完成全局自定义组件的声明.示例代码如下 ...
- 前端vue框架 父组件与子组件之间的相互调用
子组件调用父组件东西: 1.在父组件与子组件契合的标签的的template模板中绑定 v-bind:自定义一个名字=“要调用的名字” 2.在子组件的script中props:["自定义的名字 ...
- Vue父子组件之间的相互通信
组件是Vue知识体系中最重要的一部分之一,父子组件由于作用域的不同,无法直接对对方的数据进行操作.它们之间的数据传递都是通过中间介质进行的,父组件给子组件传值是通过props属性,而子组件给父组件传值 ...
- Vue 父子组件之间的互相调用方法
第一种方法 直接在子组件中通过this.$parent.event来调用父组件的方法 父组件 <template> <div> <child></child& ...
- vue中兄弟之间组件通信
我们知道Vue中组件之间的通信有很多方式,父子之间通信比较简单,当我们使用vuex时候,兄弟组件之间的通信也很好得到解决 当我们项目较小时候,不使用vuex时候Vue中兄弟组件之间的通信是怎样进行的呢 ...
- Vue中组件间通信的方式
Vue中组件间通信的方式 Vue中组件间通信包括父子组件.兄弟组件.隔代组件之间通信. props $emit 这种组件通信的方式是我们运用的非常多的一种,props以单向数据流的形式可以很好的完成父 ...
- JAVA和C/C++之间的相互调用。
在一些Android应用的开发中,需要通过JNI和 Android NDK工具实现JAVA和C/C++之间的相互调用. Java Native Interface (JNI)标准是java平台的一部分 ...
随机推荐
- Bash shell编程的语法知识点(1)
Bash shell脚本编程知识点如下(初学,不全,欢迎讨论补充): shell简介 脚本的简单介绍 变量和引用 算术运算 交互式编程 选择判断 条件测试 循环 函数 shell简介 shell是一种 ...
- 单独mybatis得使用
今天同学说要学习mybatis后来他写了个程序让我看看,我看了一下发现包引错了,他写的是单独的mybatis,引入的却是spring-mybatis,所以会报错. 今天我记录一下单独mybatis的使 ...
- Struts2思维导图
自己感觉自己的知识不是很扎实,所以昨天留时间复习知识,昨天边复习边画了一个思维导图.不知道自己画的对不对,还没有画完.有错的地方大家请和我说.希望自己能更加牢固的记住这些知识. 不说废话,开图.图有点 ...
- Winform应用程序实现通用遮罩层二
之前先后发表过:<Winform应用程序实现通用遮罩层>.<Winform应用程序实现通用消息窗口>,这两款遮罩层其实都是基于弹出窗口的,今天为大家分享一个比较简单但界面相对友 ...
- 如何一条sql语句查找表中第二大值
例1: 一个Customer表,一个字段Value,现请问如何查到Value中第二大的值 select max(value) from Customer where value < (selec ...
- ASP.NET 设计模式:应用程序分层与关注点分离(SoC)
应用程序分层设计 应用程序分层属于关注点分离的一种形式,可以通过命名空间.文件夹或采用单独的项目来实现. 下图为一个采用分层设计的项目结构 ASPPatterns.Chap3.Layered.Repo ...
- C# war3 巨魔精灵 minimap
弃坑LOL后,无聊的时候玩玩 war3的RPG地图,巨魔与精灵. 玩了一段时间精灵....然后玩魔结果总是找不到人.所以就有了这个想法. 代码纯粹靠搬运. 说下原理,网上有份代码,可以查看当前选中目 ...
- hdf5 AttributeError: 'UnImplemented' object has no attribute 'read'
问题现象:最近在用pandas分析数据时,用hdf5存储结果,当我监听不同文件时,多个进程同时写入hdf5(save到不同group)时,报hdf5 AttributeError: 'UnImplem ...
- React Native学习(一)——搭建开发环境
第一次接触React Native,首先搭建环境,过程还算顺利,不过也遇到了些问题,这里简单记录下来.中文官网(http://reactnative.cn/docs/0.47/getting-star ...
- 关于 AutomationProperties.Name 的一些总结
在 XAML 代码中,我们偶尔会看到 AutomationProperies 的代码,如 AutomationProperties.Name="xxxxx", Automation ...