vue实现json树结构（面试题）

vue实现json树结构（面试题） 01.需求 1.JSON数据如下图所示

2.将JSON结构使用代码将其展示在界面上，如下图所示

02.实现思路 1.定义三层组件，第一层遍历当前数组传给子组件 2.第二层组件定义内容层、json-tree层、json-tree层再进行递归并将值传回当前组件 3.内容层通过渲染函数自定义所展示的信息 4.通过递归循环后所有层级内容都会传给内容层 03.注意 1.json-tree层组件为本身，需指定组件名称以及name选项 2.内容层参数为json-tree层参数，否则递归json-tree层本身的时候取不到值 3.内容层props中的参数需要json-tree层参数一致（这里统一为node） 代码

1.JSON数据

[
    {
      label: "一级 1",
      children: [
        {
          label: "二级 1-1",
          children: [
            {
              label: "三级 1-1-1",
            },
          ],
        },
      ],
    },
    {
      label: "一级 2",
      children: [
        {
          label: "二级 2-1",
          children: [
            {
              label: "三级 2-1-1",
              children: [
                    {
                        label: "四级 2-1-1-1",
                    },
              ]
            },
          ],
        },
        {
          label: "二级 2-2",
          children: [
            {
              label: "三级 2-2-1",
            },
          ],
        },
      ],
    },
    {
      label: "一级 3",
      children: [
        {
          label: "二级 3-1",
          children: [
            {
              label: "三级 3-1-1",
            },
          ],
        },
        {
          label: "二级 3-2",
          children: [
            {
              label: "三级 3-2-1",
            },
          ],
        },
      ],
    }
  ]

2.tree.vue

3.jsonTree.vue