无锡专业网站制作的公司,wordpress 首页 不显示归档,网站老是快照打开,网页设计图片显示不出来学习vue有一段时间了#xff0c;最近使用vue做了一套后台管理系统#xff0c;左侧菜单需求是这样的#xff0c;可以多层#xff0c;数据由后台传递。也因为自己对官方文档的不熟悉使得自己踩了不少坑#xff0c;今天写出来和大家一起分享。效果图如下所示#xff1a;先说…学习vue有一段时间了最近使用vue做了一套后台管理系统左侧菜单需求是这样的可以多层数据由后台传递。也因为自己对官方文档的不熟悉使得自己踩了不少坑今天写出来和大家一起分享。效果图如下所示先说说遇到的坑由于是子父组件当时传递使用的是子父组件的传递但是这时候只能获取到第一层的数据第二层往后获取不到数据踩了一下午坑以后才知道子组件使用了递归组件这时候他已经不能往父组件传递了子传父只能逐层传递这时候已经隔层了所以我使用了非子父组件传递两个页面都引入bus.js这里不懂的请百度。bus.jsimport Vue from vueexport default new Vue父组件内容模拟后台数据theModel:[{id: 1,menuName: 导航1,menuCode: 10,menuUrl:,childMenus: [{menuName: 用户管理,menuCode: 11,menuUrl:/home,menuPath:,childMenus:[{menuName: 11111,menuCode: 12,menuUrl:/systemjuri,menuPath:,childMenus: []}]},{menuName: 角色管理,menuCode: 12,menuUrl:/systemjuri,menuPath:,childMenus: []},{menuName: 菜单管理,menuUrl:/systemmenu,menuCode: 13,menuPath:http://10.63.195.214:8080/menuManage/html/index_3.html,childMenus:[]}]},{id: 1,menuName: 导航2,menuCode: 10,childMenus:[]}],父组件引入子组件import myTree from ./treeMenu.vueexport default {components: {myTree},}父组件接受子组件传递的数据bus.$on(childEvent, function(transmit) {})下面是子组件内容子组件名称treeMenuname: treeMenu,●{{ model.menuName }}import bus from ./../../../static/js/bus;export default {name: treeMenu,props: [model],data() {return {open: false,}},computed: {isFolder() {return this.model.childMenus this.model.childMenus.length}},methods: {toggle(msg,menuUrl,menuPath) {if (this.isFolder) {this.open !this.open}var json { msg: msg, menuUrl: menuUrl,menuPath:menuPath };bus.$emit(childEvent, json)},}}ul {list-style: none;}i.icon {display: inline-block;width: 15px;height: 15px;background-repeat: no-repeat;vertical-align: middle;float: right;margin-top: 17px;margin-right:30px;}.icon.folder {background-image: url(./homeimg/left_1.png);}.icon.folder-open {background-image: url(./homeimg/dowm_1.png);}.icon.file-text {}ul li ul li .icon.folder {background-image: url(./homeimg/left_2.png);}ul li ul li .icon.folder-open {background-image: url(./homeimg/down_2.png);}.tree-menu li {line-height: 50px;}span{display: block;width: 100%;height: 100%;}ul{padding-left:10px;}ul li span{text-indent: 10px;}ul li ul{background:#ebf1f8;color:#1457a7;}li:hover{cursor:pointer;}由于用了递归组件所以name需要和对应起来总结以上所述是小编给大家介绍的vue左侧菜单,树形图递归实现代码希望对大家有所帮助如果大家有任何疑问请给我留言小编会及时回复大家的。在此也非常感谢大家对脚本之家网站的支持
