vant Collapse 折叠面板 vue组件递归包括点击事件

Vant的Collapse折叠面板组件是一个轻量级、易于使用的Vue组件，它允许你在页面上创建可以展开和关闭的内容区域。在Vant的库中，递归功能通常通过设置递归结构的数据和动态渲染children属性来实现。例如：

<template>
  <van-collapse v-model="activeKey">
    <van-collapse-item
      :key="item.key"
      v-for="(item, index) in items"
      @click="handleItemClick(index)">
      <div slot="title">{{ item.title }}</div>
      <p>{{ item.content }}</p>
      <!-- 如果item有children，则会递归显示 -->
      <van-collapse :active-key="item.activeKey" v-if="item.children && item.children.length">
        <van-collapse-item v-for="(child, childIndex) in item.children" :key="child.key">
          <!-- 重复上面的结构... -->
        </van-collapse-item>
      </van-collapse>
    </van-collapse-item>
  </van-collapse>
</template>

<script>
export default {
  data() {
    return {
      activeKey: '',
      items: [
        // 递归数据示例
        {
          title: '一级标题',
          content: '一级内容',
          children: [
            { title: '二级标题', content: '二级内容', ... },
            { title: '更多二级标题', content: '更多二级内容', ... }
          ]
        },
        // 其他项...
      ],
    };
  },
  methods: {
    handleClickItem(index) {
      this.activeKey = index; // 当点击某个折叠项时，更新activeKey状态
    }
  },
};
</script>

在这个例子中，当用户点击折叠面板内的某个子项时，`handleItemClick`方法会被触发，更新`activeKey`以便切换到相应的子折叠。如果当前项还有更多的子级，它们将会递归地显示出来。