Vue递归组件实现树形结构菜单

    Tree 组件是递归类组件的典型代表，它常用于文件夹、组织架构、生物分类、国家地区等等，世间万物的大多数结构都是树形结构。使用树控件可以完整展现其中的层级关系，并具有展开收起选择等交互功能。
    如图所示，我们要实现的就是这样一个效果。之前我们写树状结构都是用jQuery来实现的，用Vue怎么实现呢？

一、数据部分模拟

  menuList:[
            {
                title:'菜单1',
                children:[
                    {
                        title:'菜单1-1',
                        children:[
                                {title:'菜单1-1-1'},
                                {title:'菜单1-1-2'},
                                {title:'菜单1-1-3'}
                            ]
                        },
                    {title:'菜单1-2'},
                    {title:'菜单1-3'}
                ]
            },
            {title:'菜单2'},
            {title:'菜单3'}
    ]
  
复制代码

二、组件各部分实现

Menu.vue

首先我们来写个menu组件,这里放个ul列表，里面的内容，用插槽来表示。



复制代码

MenuItem.vue

如果没有子节点，所要展示的标题



复制代码

SubMenu.vue

复制代码

三、递归组件ReSubMenu.vue

这里到了我们实现树形结构思想的重点，即递归组件。当我们重复判断有没有子节点，并做出相应的展示的时候，这里就可以使用递归组件了。方便快捷，你值得拥有。

由于有子节点会循环SubMenu这部分操作，所以单独提出来放到ReSubMenu组件中



复制代码

四、整合实现

"app">
   
        
   


复制代码

注：本节部分语句参考 https://juejin.im/book/5bc844166fb9a05cd676ebca/section/5bfcecc7f265da61682b102a。

转载于:https://juejin.im/post/5c97488ce51d4531e61cea3f