vue 封装一个根据动态数据渲染左侧无限层级的导航菜单的组件

可以使用递归组件来实现无限层级的导航菜单。以下是一个简单的示例代码：

<template>
  <ul>
    <li v-for="item in menuData" :key="item.id">
      <a v-if="item.children" @click.prevent="toggle(item)">
        {{ item.name }}
        <span v-if="item.expanded">-</span>
        <span v-else>+</span>
      </a>
      <a v-else>{{ item.name }}</a>
      <recursive-menu v-if="item.children && item.expanded" :menu-data="item.children" />
    </li>
  </ul>
</template>

<script>
export default {
  name: 'RecursiveMenu',
  props: {
    menuData: {
      type: Array,
      default: () => []
    }
  },
  data() {
    return {
      expandedItems: []
    }
  },
  methods: {
    toggle(item) {
      if (this.expandedItems.includes(item.id)) {
        this.expandedItems = this.expandedItems.filter(id => id !== item.id)
      } else {
        this.expandedItems.push(item.id)
      }
    }
  },
  components: {
    RecursiveMenu: {
      name: 'RecursiveMenu',
      props: {
        menuData: {
          type: Array,
          default: () => []
        }
      },
      template: `
        <ul>
          <li v-for="item in menuData" :key="item.id">
            <a v-if="item.children" @click.prevent="$emit('toggle', item)">
              {{ item.name }}
              <span v-if="item.expanded">-</span>
              <span v-else>+</span>
            </a>
            <a v-else>{{ item.name }}</a>
            <recursive-menu v-if="item.children && item.expanded" :menu-data="item.children" @toggle="$emit('toggle', $event)" />
          </li>
        </ul>
      `
    }
  }
}
</script>

在这个示例中，我们使用了一个名为 `RecursiveMenu` 的递归组件来渲染导航菜单。该组件接受一个名为 `menuData` 的数组作为输入，并将其递归渲染为无限层级的导航菜单。

组件首先遍历 `menuData` 数组中的每个项目，并为每个项目渲染一个列表项。对于具有子菜单的项目，我们添加了一个展开/折叠按钮，并在单击时触发 `toggle` 方法来切换其展开状态。如果项目已展开，则显示减号图标，否则显示加号图标。

对于每个具有子菜单的项目，我们还使用了另一个 `RecursiveMenu` 组件来递归渲染其子菜单。我们将当前项目的 `children` 属性传递给递归组件，并在 `toggle` 事件中传递当前项目以更新其展开状态。