基于vue3-vant使用递归组件实现树形结构折叠菜单

最新推荐文章于 2025-05-25 23:17:51 发布

原创

最新推荐文章于 2025-05-25 23:17:51 发布 · 4.4k 阅读

12 ·

CC 4.0 BY-SA版权

文章标签：

#vue.js #javascript #前端

在移动端开发中遇到无限层级的树形折叠菜单需求，通过使用Vue3和Vant，结合递归组件来解决。重点在于理解递归思路，处理数据传递与事件交互。父组件负责传递数据和监听事件，子组件实现递归显示子节点。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

这两天在进行移动端业务功能开发的时候碰到一个树形结构的折叠菜单，

一般来说基于2-3层树形结构直接嵌套就好了，但是后端返回的数据可能无限制，所以思考过后决定采用递归组件的方法。

递归组件主要注意的是1，递归的思路，2，数据和事件的传递。我这里是采用了封装的思想。

父组件：主要用于传递原始数据进去和监听事件和参数

子组件

<template>
  <van-collapse ref="tree" v-model="activeNames" v-for="item in props.treeData" :key="item.rowId">
    <template v-if="item.children?.length > 0">
      <van-collapse-item :name="item.rowId">
        <template #title>
          <span @click.stop="clickItem(item)">{
  
  {
            item.titleName
          }}</span>
        </template>
        <tree-nav
          v-if="item.children"
          :tree-data="item.children"