vue3封装一个树形组件

下面是一个简单的示例，演示如何使用 Vue3 封装一个树形组件：

<template>
  <ul>
    <li v-for="item in treeData" :key="item.id">
      <span @click="toggle(item.id)">
        {{ item.label }}
        <i v-if="item.children && item.children.length" :class="{'fa-chevron-down': !item.showChildren, 'fa-chevron-up': item.showChildren}"></i>
      </span>
      <Tree :tree-data="item.children" v-if="item.showChildren" />
    </li>
  </ul>
</template>

<script>
import { ref, watch } from 'vue';

export default {
  name: 'Tree',
  props: {
    treeData: {
      type: Array,
      required: true
    }
  },
  setup(props) {
    // 使用 ref 来追踪当前节点是否展开
    const treeNodes = ref([]);

    watch(() => props.treeData, () => {
      // 在每次更新 props 时更新 ref 的值
      treeNodes.value = props.treeData.map(item => ({
        ...item,
        showChildren: false
      }));
    }, { deep: true });

    const toggle = (id) => {
      // 切换当前节点的展开状态
      treeNodes.value = treeNodes.value.map(item => {
        if (item.id === id) {
          return {
            ...item,
            showChildren: !item.showChildren
          };
        } else {
          return item;
        }
      });
    }

    return {
      treeNodes,
      toggle
    };
  }
}
</script>

<style>
  .fa-chevron-up:before {
    content: "\f077";
    transform: rotate(45deg);
  }
  .fa-chevron-down:before {
    content: "\f078";
  }
</style>

在这个示例中，我们使用了 setup 函数来处理数据和逻辑。首先，我们使用一个 ref 变量来存储每个节点的展开状态，并使用 watch 来监听 props.treeData 的变化，更新 ref 变量的值。然后，我们定义了一个 toggle 函数，用来切换当前节点的展开状态。最后，我们使用 v-for 来循环遍历树形数据，使用 v-if 来判断当前节点是否展开，并使用递归地方式来渲染嵌套的子组件。最终，我们在树形节点上添加了一个可点击的图标，来让用户方便地展开或收缩子节点。

当然，这只是一个简单的示例，你可以根据自己的需求来扩展和优化它。