vue 递归组件多级_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列表，里面的内容，用插槽来表示。

export default {

name: "Menu"

}

复制代码

MenuItem.vue

如果没有子节点，