vue左侧菜单,树形图递归实现代码

学习某视频剪辑软件有一段时间了，最近使用某视频剪辑软件做了一套后台管理系统，左侧菜单需求是这样的，可以多层，数据由后台传递。也因为自己对官方文档的不熟悉使得自己踩了不少坑，今天写出来和大家一起分享。

效果图如下所示：

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

bus.js

从“vue”导入某视频剪辑软件导出默认的新某视频剪辑软件父组件内容

ul v-for=' MenuItem in MoDEL ' my-tree : MoDEL=' MenuItem '/my-tree/ul模拟后台数据

模型：[{ 'id': '1 '，' menuName': '导航1 '，' menuCode': '10 '，' menuUrl': ' '，' ChildMenus ' :[{ ' Menume ' : '用户管理、' menuCode': '11 '、' menuUrl':'/home '、' menuPath': '、' ChildMenuMenu ' : ' 11111 '、' menuCode': '12 '、' menuUrl':'/systemjuri '、' menuPath': '、' ChildMenuMenu ' 3360[]}、{ ' menumenume '角色管理，' menuCode': '12 '，' menuUrl':'/systemjuri '，' menuPath': '，' childMenus': [] }，{ ' menuName ' : '菜单管理，' menuUrl':'/systemmenu '，' menuCode': '13 '，' MenuPath ' : ' http://10。63 .195 .21433608080/MenuManage/html/index _ 3。html '，' childMenus ' :[]}，{'id': '1 '，' menuName ' : '导航2 '，' menuCode': '10 '，' childMenus':[]}]，父组件引入子组件

从""导入我的树./TreeMenu。vue ' export default { components 3360 { MyTree }，}父组件接受子组件传递的数据

公共汽车$on('childEvent '，函数(传输){})

下面是子组件内容，子组件名称树形菜单，名称为： '树形菜单，

templatelispan @ click=' toggle(model。menuname，model.menuUrl，model.menuPath)'i v-if='！is folder ' class=' icon file-text '/I { { model }。menuname } } I v-if=' isFolder ' class=' icon ' : class='[open？folder-open ' : ' folder ']'/I/spanul v-show=' open ' v-if=' is folder ' tree-menu v-for=' model。childmenus ' :型号=' item ' :键=' item。menuid '/tree-menu/ul/Li/template脚本从'导入总线././././static/js/bus '；导出默认{name: 'treeMenu '，prop :[' model ']，data() {return {open: false，}}，computed : { is folder(){ return this。模特。儿童菜单这个。模特。儿童菜单。length } }，methods 3360 { toggle(msg，menuUrl，menuPath){ if(this。是文件夹){这。open=！this.open}var json={ msg: msg，menuUrl: menuUrl，menupaths :菜单路径}；公共汽车$emit('childEvent '，json)}，}/script style ul { list-style : none；} I .图标{显示：内嵌块；宽度： 15px高度： 15px背景-重复：不重复；垂直对齐： 中间；向右浮动：边距-top : 17px；右边距：30 px} .图标。文件夹{背景图像： URL(' ./homeimg/left _ 1。png ')；} .图标。文件夹-打开{背景图像： URL(' ./homeimg/dowm _ 1。png ')；} .图标。文件-文本{ } ul Li ul Li。图标。文件夹{背景图像： URL(' ./homeimg/left _ 2。png ')；} ul Li ul Li。图标。文件夹-打开{背景图像： URL(' ./homeimg/down _ 2。png ')；}.树形菜单李{行高： 50px} span { display:块；宽度： 100%;高度： 100%;} ul { padding-left :10 px；} ul Li span { text-indent : 10px；} ul Li ul {背景： # ebf 1 F8；color: # 1457a7} Li :悬停{光标：指针；}/样式由于用了递归组件所以名字需要和树形菜单对应起来

总结

以上所述是小编给大家介绍的某视频剪辑软件左侧菜单，树形图递归实现代码，希望对大家有所帮助，如果大家有任何疑问请给我留言，小编会及时回复大家的。在此也非常感谢大家对我们网站的支持！