vue3 树节点如何通过子节点的parentid找到父节点数据

在Vue 3中，如果你有一个树形结构的数据，并且想要通过子节点的parentId找到其父节点数据，你可以使用递归组件或者在组件的方法中实现递归逻辑来遍历树形数据。

以下是一个简单的示例，展示如何在Vue 3组件中实现这个功能：

<template>
  <div>
    <!-- 你的组件内容 -->
    <button @click="findParentNode">Find Parent Node</button>
  </div>
</template>

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

export default {
  setup() {
    // 假设这是你的树形数据
    const treeData = ref([
      // ... 你的树形数据结构
    ]);

    // 要搜索的子节点的parentId
    const childParentId = 7;

    // 查找父节点的函数
    const findParentNode = () => {
      function searchParentNode(nodes, parentId) {
        for (const node of nodes) {
          if (node.parentId === parentId) {
            return node; // 返回找到的父节点
          }
          if (node.children) {
            const parentNode = searchParentNode(node.children, parentId);
            if (parentNode) return parentNode; // 如果在子节点中找到，返回父节点
          }
        }
        return null; // 如果没有找到，返回null
      }

      const parentNode = searchParentNode(treeData.value, childParentId);
      if (parentNode) {
        console.log('Parent Node Found:', parentNode);
      } else {
        console.log('Parent Node Not Found');
      }
    };

    return {
      treeData,
      findParentNode
    };
  }
};
</script>

在这个示例中，我们首先定义了树形数据treeData，并且有一个childParentId变量来存储要搜索的子节点的parentId。

findParentNode方法是一个点击事件处理器，它调用一个内部定义的递归函数searchParentNode。这个递归函数遍历树形数据，寻找具有匹配parentId的节点。如果找到匹配的parentId，它会返回相应的父节点对象。

请注意，这个示例假设你的树形数据结构已经以某种方式加载到treeData变量中，并且每个节点都有一个parentId属性，该属性的值是其父节点的id。

在实际应用中，你的树形数据结构可能会更复杂，并且可能需要根据你的具体需求调整搜索逻辑。