当前位置：首页 > VUE

vue实现菜单递归

2026-03-30 07:40:53VUE

Vue 实现递归菜单

递归菜单通常用于展示多层级嵌套的数据结构，如导航菜单、目录树等。以下是实现递归菜单的几种方法：

使用递归组件

创建一个递归组件，组件内部调用自身来处理嵌套数据。

<template>
  <ul>
    <li v-for="item in menuData" :key="item.id">
      {{ item.name }}
      <MenuTree v-if="item.children && item.children.length" :menuData="item.children"/>
    </li>
  </ul>
</template>

<script>
export default {
  name: 'MenuTree',
  props: {
    menuData: {
      type: Array,
      required: true
    }
  }
}
</script>

动态组件实现

通过动态组件和计算属性实现递归菜单。

<template>
  <ul>
    <li v-for="item in menuData" :key="item.id">
      {{ item.name }}
      <component 
        :is="item.children && item.children.length ? 'MenuTree' : 'span'" 
        :menuData="item.children"
      />
    </li>
  </ul>
</template>

使用渲染函数

通过渲染函数实现更灵活的递归菜单。

vue实现菜单递归

export default {
  name: 'MenuTree',
  functional: true,
  props: {
    menuData: {
      type: Array,
      required: true
    }
  },
  render(h, { props }) {
    const renderItems = (items) => {
      return items.map(item => (
        <li key={item.id}>
          {item.name}
          {item.children && item.children.length && (
            <ul>{renderItems(item.children)}</ul>
          )}
        </li>
      ))
    }
    return <ul>{renderItems(props.menuData)}</ul>
  }
}

注意事项

递归组件必须设置name属性，否则无法递归调用自身
确保数据结构中有明确的终止条件，避免无限递归
对于深层级数据，考虑使用v-memo优化性能

示例数据结构

const menuData = [
  {
    id: 1,
    name: '菜单1',
    children: [
      {
        id: 11,
        name: '子菜单1-1',
        children: []
      }
    ]
  },
  {
    id: 2,
    name: '菜单2',
    children: []
  }
]

以上方法均可实现递归菜单功能，选择取决于具体需求和个人偏好。递归组件方式最直观，渲染函数方式最灵活，动态组件方式则介于两者之间。