vue左侧菜单，树形图递归实现

最近在做一个后台管理系统，左侧菜单需求是这样的，可以多层，数据由后台传递。

先说说遇到的坑，由于是子父组件，当时传递使用的是子父组件的传递，但是这时候只能获取到第一层的数据，第二层往后获取不到数据，踩了一下午坑以后才知道，子组件使用了递归组件，这时候他已经不能往父组件传递了，子传父，只能逐层传递这时候已经隔层了，所以我使用了非子父组件传递，两个页面都引入bus.js，这里不懂的请百度。

bus.js

import Vue from 'vue'

export default new Vue

父组件内容

< ul v-for="menuItem in theModel">

< my-tree : model="menuItem">my-tree>

ul>

模拟后台数据

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.vue'

export default {

    components: {

    myTree

    },

}

父组件接受子组件传递的数据

bus. $on( "childEvent", function( transmit) {})

下面是子组件内容，子组件名称treeMenu，name: 'treeMenu',

< template>

< li>

< span @ click=" toggle( model. menuName, model. menuUrl, model. menuPath)">

< i v-if=" !isFolder" class= "icon file-text">●i>

{{ model. menuName }}

< i v-if="isFolder" class= "icon" : class="[open ? 'folder-open' : 'folder']">i>

span>

< ul v-show="open" v-if="isFolder">

< tree-menu v-for="item in model. childMenus" : model="item" : key=" item. menuId">tree-menu>

ul>

li>

template>

< script>

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)

},

}

}

script>

< style>

ul {

list-style: none;

}

i .icon {

display: inline-block;

width: 15 px;

height: 15 px;

background-repeat: no-repeat;

vertical-align: middle;

float: right;

margin-top: 17 px;

margin-right: 30 px;

}

.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: 50 px;

}

span{

display: block;

width: 100 %;

height: 100 %;

}

ul{

padding-left: 10 px;

}

ul li span{

text-indent: 10 px;

}

ul li ul{

background: #ebf1f8;

color: #1457a7;

}

li :hover{

cursor: pointer;

}

style>

由于用了递归组件所以name需要和对应起来

展示