Vue递归实现树形菜单方法实例

在 Vue 中实现树形菜单，我们可以通过递归组件的方式来实现。本文将详细介绍如何使用递归组件实现树形菜单，并给出两个示例供大家参考。

步骤

1. 定义数据结构

我们首先需要定义一个树形结构的数据。这里我们以一个简单的 JSON 数据为例：

{
  "id": 1,
  "name": "根节点",
  "children": [
    {
      "id": 2,
      "name": "子节点1",
      "children": [
        {
          "id": 4,
          "name": "子节点1-1",
          "children": []
        },
        {
          "id": 5,
          "name": "子节点1-2",
          "children": []
        }
      ]
    },
    {
      "id": 3,
      "name": "子节点2",
      "children": []
    }
  ]
}

1. 定义递归组件

定义一个递归组件，用来展示上面定义的树形数据。

<template>
  <ul>
    <li v-for="node in tree">
      {{ node.name }}
      <tree-node :child-nodes="node.children" />
    </li>
  </ul>
</template>

<script>
export default {
  name: "tree-node",
  props: {
    childNodes: {
      type: Array,
      default: () => [],
    },
  },
  components: {
    TreeNode: {
      name: "tree-node",
      props: {
        childNodes: {
          type: Array,
          default: () => [],
        },
      },
      template: `
        <li v-for="node in childNodes">
          {{ node.name }}
          <tree-node :child-nodes="node.children" />
        </li>
      `,
    },
  },
};
</script>

这里使用了递归组件，即组件自身会嵌套调用自己。<tree-node :child-nodes="node.children" />就是在递归调用自己。

1. 使用递归组件

在 Vue 中使用递归组件非常简单，只需要在组件内部调用它自己就可以了。

<template>
  <tree-node :child-nodes="data" />
</template>

<script>
import TreeNode from "./TreeNode.vue";

export default {
  name: "app",
  components: {
    TreeNode,
  },
  data() {
    return {
      data: {
        "id": 1,
        "name": "根节点",
        "children": [
          {
            "id": 2,
            "name": "子节点1",
            "children": [
              {
                "id": 4,
                "name": "子节点1-1",
                "children": []
              },
              {
                "id": 5,
                "name": "子节点1-2",
                "children": []
              }
            ]
          },
          {
            "id": 3,
            "name": "子节点2",
            "children": []
          }
        ]
      },
    };
  },
};
</script>

示例

示例1

先放上一个示例代码。

// App.vue
<template>
  <div>
    <tree-node :tree="data" />
  </div>
</template>

<script>
import TreeNode from "./TreeNode.vue";

export default {
  name: "app",
  components: {
    TreeNode,
  },
  data() {
    return {
      data: {
        "id": 1,
        "name": "根节点",
        "children": [
          {
            "id": 2,
            "name": "子节点1",
            "children": [
              {
                "id": 4,
                "name": "子节点1-1",
                "children": []
              },
              {
                "id": 5,
                "name": "子节点1-2",
                "children": []
              }
            ]
          },
          {
            "id": 3,
            "name": "子节点2",
            "children": []
          }
        ]
      },
    };
  },
};
</script>

// TreeNode.vue
<template>
  <ul>
    <li v-for="node in tree">
      {{ node.name }}
      <tree-node :tree="node.children" />
    </li>
  </ul>
</template>

<script>
export default {
  name: "tree-node",
  props: {
    tree: {
      type: Object,
      default: () => {},
    },
  },
  components: {
    TreeNode: {
      name: "tree-node",
      props: {
        tree: {
          type: Object,
          default: () => {},
        },
      },
      template: `
        <li v-for="node in tree">
          {{ node.name }}
          <tree-node :tree="node.children" />
        </li>
      `,
    },
  },
};
</script>

示例2

这个示例使用了 Vuex 来存储树形数据并展示。

// App.vue
<template>
  <div>
    <tree-node :tree="tree" />
  </div>
</template>

<script>
import TreeNode from "./TreeNode.vue";
import { mapState } from "vuex";

export default {
  name: "app",
  components: {
    TreeNode,
  },
  computed: {
    ...mapState(["tree"]),
  },
  mounted() {
    this.init();
  },
  methods: {
    init() {
      const data = {
        "id": 1,
        "name": "根节点",
        "children": [
          {
            "id": 2,
            "name": "子节点1",
            "children": [
              {
                "id": 4,
                "name": "子节点1-1",
                "children": []
              },
              {
                "id": 5,
                "name": "子节点1-2",
                "children": []
              }
            ]
          },
          {
            "id": 3,
            "name": "子节点2",
            "children": []
          }
        ]
      };

      this.$store.commit("SET_TREE", data);
    },
  },
};
</script>

// TreeNode.vue
<template>
  <ul>
    <li v-for="node in tree">
      {{ node.name }}
      <tree-node :tree="node.children" />
    </li>
  </ul>
</template>

<script>
export default {
  name: "tree-node",
  props: {
    tree: {
      type: Array,
      default: () => [],
    },
  },
  components: {
    TreeNode: {
      name: "tree-node",
      props: {
        tree: {
          type: Array,
          default: () => [],
        },
      },
      template: `
        <li v-for="node in tree">
          {{ node.name }}
          <tree-node :tree="node.children" />
        </li>
      `,
    },
  },
};
</script>

在这个示例中，我们使用了 Vuex 保存了树形结构的数据，并在组件中使用 mapState 获取了 tree 数据，并将 tree 传递给了递归组件 TreeNode。在 init 方法中我们初始化了树形数据。