vue组件递归点击下个目录上个目录自动收起

您好！感谢您的提问。针对您的问题，我提供以下解决思路：

1. 在组件中定义一个变量来记录当前展开的目录。

2. 在列表项上加上点击事件，当点击时，判断当前点击的目录是否已经展开，如果已经展开，则收起该目录；如果未展开，则将该目录展开。

3. 递归实现子目录的展开和收起。

以下是示例代码：

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

<script>
export default {
  name: 'tree',
  props: {
    list: {
      type: Array,
      required: true
    }
  },
  data() {
    return {
      activeId: null
    }
  },
  methods: {
    toggle(item) {
      if (item.id === this.activeId) {
        this.activeId = null
      } else {
        this.activeId = item.id
      }
    }
  },
  components: {
    tree: {
      name: 'tree',
      props: {
        list: {
          type: Array,
          required: true
        }
      },
      template: `
        <ul>
          <li v-for="item in list" :key="item.id">
            <div @click="toggle(item)">
              {{ item.name }}
            </div>
            <tree v-if="item.children && item.id === activeId" :list="item.children" />
          </li>
        </ul>
      `,
      data() {
        return {
          activeId: null
        }
      },
      methods: {
        toggle(item) {
          if (item.id === this.activeId) {
            this.activeId = null
          } else {
            this.activeId = item.id
          }
        }
      },
      components: {
        tree
      }
    }
  }
}
</script>

上面这段代码是一个递归组件，可以根据传入的数据渲染出一个树形结构。其中，我们在组件中定义了一个变量 activeId，用来记录当前展开的目录。在点击目录时，我们通过 toggle 方法来判断当前目录是否已经展开，如果已经展开，则将 activeId 设置为 null，收起该目录；如果未展开，则将 activeId 设置为该目录的 id，展开该目录。

在组件中嵌套了一个子组件 tree，并使用 v-if 来实现子目录的递归展开和收起。在子组件中，我们也定义了一个变量 activeId，用来记录当前展开的目录。通过递归调用 tree 组件，可以实现无限级别的目录展开和收起。

希望这个思路可以帮助到您！