vue组件递归加手风琴的案列

好的，下面是一个简单的 Vue 组件递归加手风琴的示例代码：

<template>
  <ul>
    <li v-for="item in items" :key="item.id">
      <div @click="toggle(item)">
        {{ item.name }}
      </div>
      <div v-if="item.children && item.expanded">
        <recursive-accordion :items="item.children"></recursive-accordion>
      </div>
    </li>
  </ul>
</template>

<script>
export default {
  props: {
    items: {
      type: Array,
      required: true
    }
  },
  data() {
    return {
      activeItemId: null
    }
  },
  methods: {
    toggle(item) {
      if (this.activeItemId === item.id) {
        this.activeItemId = null
      } else {
        this.activeItemId = item.id
      }
      item.expanded = !item.expanded
    }
  },
  components: {
    RecursiveAccordion: {
      props: {
        items: {
          type: Array,
          required: true
        }
      },
      template: `
        <ul>
          <li v-for="item in items" :key="item.id">
            <div @click="toggle(item)">
              {{ item.name }}
            </div>
            <div v-if="item.children && item.expanded">
              <recursive-accordion :items="item.children"></recursive-accordion>
            </div>
          </li>
        </ul>
      `,
      methods: {
        toggle(item) {
          this.$emit('toggle', item)
        }
      }
    }
  }
}
</script>

这个组件包括一个 `Accordion` 组件和一个递归的子组件 `RecursiveAccordion`。`Accordion` 组件渲染一个包含所有一级菜单的列表，每个菜单项都包含一个标题和一个可选的子菜单。`RecursiveAccordion` 组件负责渲染子菜单，并递归渲染所有子菜单。

当用户单击菜单项时，`toggle` 方法会在 `Accordion` 组件和 `RecursiveAccordion` 组件之间进行传递。在 `Accordion` 组件中，该方法会切换菜单项的展开状态，并在 `RecursiveAccordion` 组件中触发 `toggle` 事件。在 `RecursiveAccordion` 组件中，`toggle` 方法会再次切换菜单项的展开状态，并将该事件发送到其父级组件。通过这种方式，用户可以单击任意菜单项以展开或折叠整个菜单。