vue树形结构的遍历

Vue树形结构的遍历可以通过递归的方式实现。以下是一种常见的实现方式：

1. 深度优先遍历（DFS）：
深度优先遍历是一种先访问根节点，然后再依次访问子节点的方式。在Vue中，可以通过递归调用自身来实现深度优先遍历。

// 定义一个组件
Vue.component('tree-node', {
  props: ['node'],
  template: `
    <div>
      {{ node.name }}
      <tree-node v-for="child in node.children" :node="child" :key="child.id"></tree-node>
    </div>
  `
});

// 在父组件中使用tree-node组件
<template>
  <div>
    <tree-node :node="treeData"></tree-node>
  </div>
</template>

<script>
export default {
  data() {
    return {
      treeData: {
        name: 'Root',
        children: [
          {
            name: 'Node 1',
            children: [
              {
                name: 'Node 1.1',
                children: []
              },
              {
                name: 'Node 1.2',
                children: []
              }
            ]
          },
          {
            name: 'Node 2',
            children: []
          }
        ]
      }
    };
  }
};
</script>

2. 广度优先遍历（BFS）：
广度优先遍历是一种先访问根节点，然后按层级依次访问子节点的方式。在Vue中，可以使用队列来实现广度优先遍历。

// 定义一个组件
Vue.component('tree-node', {
  props: ['node'],
  template: `
    <div>
      {{ node.name }}
      <tree-node v-for="child in node.children" :node="child" :key="child.id"></tree-node>
    </div>
  `
});

// 在父组件中使用tree-node组件
<template>
  <div>
    <tree-node :node="treeData"></tree-node>
  </div>
</template>

<script>
export default {
  data() {
    return {
      treeData: {
        name: 'Root',
        children: [
          {
            name: 'Node 1',
            children: [
              {
                name: 'Node 1.1',
                children: []
              },
              {
                name: 'Node 1.2',
                children: []
              }
            ]
          },
          {
            name: 'Node 2',
            children: []
          }
        ]
      }
    };
  },
  mounted() {
    this.bfsTraversal(this.treeData);
  },
  methods: {
    bfsTraversal(node) {
      const queue = [node];
      while (queue.length > 0) {
        const currentNode = queue.shift();
        console.log(currentNode.name);
        if (currentNode.children && currentNode.children.length > 0) {
          queue.push(...currentNode.children);
        }
      }
    }
  }
};
</script>