vue组件递归实现树形菜单

vue组件递归实现树形菜单

最近有一个任务就是用vue组件实现树形菜单，我一开始还打算老老实实的写ul/li标签+v-for来渲染，结果指导人过来指点了我一番，最后用了不到20行代码就搞定了，我这才知道了组件还可以递归使用！废话不多说，一起来学习吧！

第一件事，我们要准备两个vue文件，第一个作为容器组件，第二个是菜单组件，因为要对菜单组件进行递归使用，所以它必须是一个独立封装的组件。然后把菜单组件放到容器组件里面。

第二件事，在菜单组件内部自我复用，即递归。

菜单组件menu.vue，它有一个list属性，用来接收要渲染的数据，第一层数据就是最原始的数据列表，接下来递归的渲染数据就是每个菜单项的子菜单列表，也就是children数组：

<ul class="menu">
    <li class="menu-item" v-for="item in list" ::key="item.name">
        <div class="menu-item-content" @click="toggleShow(item)">
            <span v-if="item.children && item.children.length">📂 </span>
            <span class="menu-item-name">{{item.name}}</span>
        </div>
        <Menu v-if="item.showChild && item.children && item.children.length" :list="item.children"></Menu>
    </li>
</ul>

这里一定要记得给Menu组件添加一个渲染条件，不然会无限调用，从而报错。渲染条件就是当菜单项没有子菜单时，就停止渲染。

容器组件menu-container.vue

<div class="menu-container">
    <Menu :list="treeMenu"></Menu>
</div>

接下来就是实现点击展开和收起菜单项，在这里我遇到了一些问题，我们在下一篇文章再一起探究吧。下一篇：关于vue中用v-for的item属性作为v-if组件渲染条件时不起作用