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列表，里面的内容，用插槽来表示。
<template>
    <ul>
       <slot></slot>
    </ul>
</template>

<script>
    export defau