vue递归实现多级菜单

Vue递归实现多级菜单是一种常见的前端开发技术，可以用于构建具有多级层次结构的菜单。下面是一种实现方式：

1. 首先，定义一个组件，例如Menu.vue，用于渲染菜单项和子菜单：

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

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

2. 在父组件中使用Menu组件，并传入菜单数据：

<template>
  <div>
    <menu :menu-items="menuData"></menu>
  </div>
</template>

<script>
import Menu from './Menu.vue';

export default {
  name: 'App',
  components: {
    Menu
  },
  data() {
    return {
      menuData: [
        {
          id: 1,
          name: '菜单1',
          children: [
            {
              id: 11,
              name: '子菜单1-1'
            },
            {
              id: 12,
              name: '子菜单1-2',
              children: [
                {
                  id: 121,
                  name: '子菜单1-2-1'
                },
                {
                  id: 122,
                  name: '子菜单1-2-2'
                }
              ]
            }
          ]
        },
        {
          id: 2,
          name: '菜单2'
        }
      ]
    };
  }
}
</script>

3. 这样，通过递归调用Menu组件，就可以实现多级菜单的渲染。当菜单项有子菜单时，会再次渲染Menu组件，实现层级嵌套。