Vue写手风琴组件和树形组件

Vue.js 写手风琴组件（Accordion）是一种常见的折叠面板组件，用户可以点击标题展开或关闭内容区域。创建一个基础的Vue手风琴组件通常会包含以下几个部分：

1. 定义模板（template）：一个标题元素（通常是`<button>`或`<hgroup>`），内部有一个`<transition>`包裹着内容区域（`<div>`或`<p>`等）。
2. 数据绑定（data）：状态变量如`activeItem`用于跟踪当前激活的折叠项。
3. 指令（methods）：处理按钮点击事件，切换`activeItem`的状态。

<template>
  <div class="accordion">
    <button v-for="(item, index) in items" :key="index" @click="toggle(index)">
      {{ item.title }}
    </button>
    <div v-show="items[index].isActive">
      {{ item.content }}
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      items: [
        { title: 'Item 1', content: 'Content for Item 1', isActive: false },
        { title: 'Item 2', content: 'Content for Item 2', isActive: false }
      ]
    };
  },
  methods: {
    toggle(index) {
      this.items.forEach(item => (item.isActive = false));
      this.items[index].isActive = true;
    }
  }
};
</script>

对于树形组件（Tree Component），它是一个递归的数据结构展示，通常包括节点数据、展开收起功能以及父子关系。Vue的`v-treeview`库或自定义组件可以实现这个功能：

1. 使用递归组件（Recursive Components）：定义一个父组件作为树节点，包含子节点列表，并传递一个属性控制是否展开子节点。
2. 子组件接收并处理递归数据：每个节点组件有自己的数据结构，通过props接收父组件传来的数据。
3. 使用`v-if`或`v-show`结合`active`状态控制显示。

<template>
  <ul v-treeview :nodes="treeData" @node-click="handleNodeClick"></ul>
</template>

<script>
export default {
  props: ['node'],
  computed: {
    treeData() {
      // 根据节点数据构建树形数据结构
      return buildTree(this.node);
    }
  },
  methods: {
    handleNodeClick(node) {
      node.expanded = !node.expanded; // 控制节点展开收起
    }
  }
};
</script>