vue3递归实现菜单栏

Vue 3中可以使用递归组件来实现菜单栏。下面是一个简单的示例：

首先，创建一个名为`Menu`的递归组件：

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

<script>
export default {
  name: 'Menu',
  props: {
    menuItems: {
      type: Array,
      default: () => []
    }
  }
}
</script>

然后，在父组件中使用该递归组件来生成菜单栏。假设你有一个名为`menuData`的菜单数据数组：

<template>
  <div>
    <Menu :menuItems="menuData" />
  </div>
</template>

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

export default {
  name: 'App',
  components: {
    Menu
  },
  data() {
    return {
      menuData: [
        {
          id: 1,
          name: '菜单1',
          children: [
            {
              id: 2,
              name: '菜单1-1',
              children: [
                {
                  id: 3,
                  name: '菜单1-1-1'
                },
                {
                  id: 4,
                  name: '菜单1-1-2'
                }
              ]
            },
            {
              id: 5,
              name: '菜单1-2'
            }
          ]
        },
        {
          id: 6,
          name: '菜单2'
        }
      ]
    };
  }
}
</script>

在上面的示例中，`menuData`是一个包含菜单项的数组。递归组件`Menu`会递归渲染每个菜单项，并对有子菜单的项进行递归调用。

这样就实现了一个简单的递归菜单栏。你可以根据自己的需求修改菜单数据和样式。