vant Collapse 折叠面板 vue组件递归

Vant库中的Collapse折叠面板组件是一个轻量级、易于使用的Vue组件，它用于创建可以展开和折叠的内容区域。这个组件非常适合需要分组展示内容，并能控制其显示状态的应用场景，比如新闻列表、设置选项等。

在递归使用Vant Collapse时，通常会结合数组结构，当数据中有嵌套层级时，你可以为每个节点创建一个Collapse组件实例，并根据当前节点的数据状态来判断是否展开。下面是一个简单的递归示例：

<template>
  <van-collapse v-model="activeKey">
    <van-collapse-item v-for="(item, index) in items" :key="index">
      <div slot="title">{{ item.title }}</div>
      <div v-if="item.children && item.children.length > 0">
        <Collapse :items="item.children" />
      </div>
      <div v-else>{{ item.content }}</div>
    </van-collapse-item>
  </van-collapse>
</template>

<script>
export default {
  data() {
    return {
      activeKey: '', // 初始选中的折叠项 key
      items: [
        { title: '一级标题', content: '这是第一级的内容...', children: [] },
        // ...其他有嵌套层级的项
      ]
    };
  }
};
</script>

在这个例子中，`items` 是一个包含父项和子项的对象数组，每项都有 `title`、`content` 和 `children` 属性。如果 `children` 非空，就递归地渲染另一个 `<Collapse>` 组件。