当前位置：首页 > VUE

vue实现菜单递归

2026-01-17 14:24:30VUE

Vue 实现菜单递归的方法

在 Vue 中实现菜单递归通常需要组件调用自身，适用于多级嵌套的菜单结构。以下是几种常见的实现方式：

使用递归组件

递归组件是 Vue 中实现菜单递归的最直接方法。组件通过 name 属性调用自身。

<template>
  <ul>
    <li v-for="item in menuItems" :key="item.id">
      {{ item.name }}
      <MenuRecursive v-if="item.children" :menuItems="item.children" />
    </li>
  </ul>
</template>

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

动态组件实现

动态组件方式通过 :is 动态绑定组件，适用于更灵活的递归场景。

<template>
  <ul>
    <li v-for="item in menuItems" :key="item.id">
      {{ item.name }}
      <component 
        v-if="item.children" 
        :is="MenuComponent" 
        :menuItems="item.children" 
      />
    </li>
  </ul>
</template>

<script>
import MenuRecursive from './MenuRecursive.vue'

export default {
  name: 'MenuWrapper',
  components: { MenuRecursive },
  data() {
    return {
      MenuComponent: 'MenuRecursive'
    }
  },
  props: {
    menuItems: {
      type: Array,
      required: true
    }
  }
}
</script>

使用渲染函数

对于需要更精细控制的场景，可以使用 Vue 的渲染函数（render function）实现递归。

export default {
  name: 'MenuRender',
  props: {
    menuItems: {
      type: Array,
      required: true
    }
  },
  render(h) {
    const renderItems = (items) => {
      return items.map(item => {
        return h('li', [
          item.name,
          item.children ? h('ul', renderItems(item.children)) : null
        ])
      })
    }
    return h('ul', renderItems(this.menuItems))
  }
}

使用计算属性处理数据

在递归渲染前，可以通过计算属性对菜单数据进行预处理，例如添加层级信息。

<script>
export default {
  props: {
    rawMenuItems: Array
  },
  computed: {
    processedMenuItems() {
      const addLevel = (items, level = 0) => {
        return items.map(item => ({
          ...item,
          level,
          children: item.children ? addLevel(item.children, level + 1) : null
        }))
      }
      return addLevel(this.rawMenuItems)
    }
  }
}
</script>

使用作用域插槽

对于需要高度自定义的递归菜单，可以使用作用域插槽将渲染逻辑交给父组件。

<template>
  <ul>
    <li v-for="item in menuItems" :key="item.id">
      <slot :item="item">
        {{ item.name }}
      </slot>
      <MenuRecursive 
        v-if="item.children" 
        :menuItems="item.children"
      >
        <template v-slot="{ item }">
          <slot :item="item" />
        </template>
      </MenuRecursive>
    </li>
  </ul>
</template>