vue实现菜单递归

Vue 实现菜单递归的方法

在 Vue 中实现菜单递归通常涉及组件自引用（组件调用自身）来处理嵌套的树形结构数据。以下是几种常见的实现方式：

使用组件自引用

创建一个可递归调用的菜单组件，通过 name 属性或动态组件实现自引用。

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

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

动态组件实现

通过 component 动态组件实现递归，避免直接依赖组件名。

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

<script>
import MenuRecursive from './MenuRecursive.vue'
export default {
  name: 'MenuRecursive',
  props: {
    menuData: Array
  },
  data() {
    return {
      MenuComponent: MenuRecursive
    }
  }
}
</script>

使用作用域插槽

通过作用域插槽实现更灵活的递归逻辑。

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

数据格式要求

递归菜单通常需要嵌套结构的数据，例如：

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

性能优化

对于深层嵌套的菜单，可通过以下方式优化性能：

• 使用 v-if 而非 v-show 控制子菜单渲染
• 添加 key 属性避免重复渲染
• 对静态分支使用 v-once 指令

样式处理

递归菜单的样式通常需要层级缩进：

ul {
  padding-left: 20px;
  list-style: none;
}

以上方法可根据实际需求组合使用，实现灵活的多级菜单递归渲染。