antdesign vue 2.0 递归菜单_Vue 和递归组件

Ant Design Vue 2.0 的递归菜单需要使用到 Vue 的递归组件。下面是一个简单的例子，展示如何使用递归组件来实现一个无限级的菜单：

<template>
  <a-menu mode="inline" :default-selected-keys="['1']">
    <template v-for="item in menuData" :key="item.key">
      <a-menu-item :key="item.key">
        <span>{{ item.title }}</span>
      </a-menu-item>
      <a-sub-menu v-if="item.children" :key="item.key + '-submenu'">
        <span slot="title">{{ item.title }}</span>
        <Menu :menu-data="item.children" />
      </a-sub-menu>
    </template>
  </a-menu>
</template>

<script>
export default {
  name: "Menu",
  props: {
    menuData: {
      type: Array,
      required: true,
    },
  },
};
</script>

在这个例子中，我们定义了一个名为 `Menu` 的组件，它接收一个名为 `menuData` 的数组作为参数。这个数组中每个元素都代表一个菜单项，如果这个菜单项包含子菜单，我们就递归调用 `Menu` 组件来渲染它的子菜单。

需要注意的是，我们在 `template` 标签中使用了 `v-for` 指令来遍历 `menuData` 数组，并为每个菜单项渲染一个 `a-menu-item` 组件。如果这个菜单项包含子菜单，我们就渲染一个 `a-sub-menu` 组件，并在它的 `title` 插槽中渲染菜单项的标题。在 `a-sub-menu` 组件中，我们递归调用 `Menu` 组件来渲染子菜单。

通过这种方式，我们可以轻松地实现一个无限级的菜单。您可以根据自己的需求来修改和扩展这个例子。