前言
最近工作中遇到一个需求，由于项目需要一个解析 JSON 字符串并生成 JSON 树的功能，在 GitHub 上也没有找到合适的组件，因此基于 Vue2.X 自己写了一个 JSON 树组件，主要原理是利用 Vue 的递归组件，进行深度优先的先序遍历。该组件不仅可以将一段不可读的 JSON 字符串转化为可读的树形结构，同时可用于抓取某一子树的数据。
Github源码
Github-Page
组件在它的模板内可以递归地调用自己。不过，只有当它有 name 选项时才可以这么做
字符串数据美化功能：
特定层级数据抓取功能：
<tree
:parent-data="data"
:data="item"
:path="path + (Array.isArray(data) ? `[${index}]` : `.${index}`)"
:path-checked="pathChecked"
:path-selectable="pathSelectable"
:selectable-type="selectableType"
:index="index"
:child="true"
@click="handleItemClick">
</tree>通过 parent-data 传入父亲的数据，data 传入孩子的数据，当子树的数据是简单类型时，不再进入递归，同时该组件提供了一个 click 事件，用于获取特定节点的树数据，而孩子的数据，则通过递归机制不断向上一层级传递，类似于“冒泡机制”。
上面是我整理给大家的，希望今后会对大家有帮助。
相关文章：
在vue中如何使用ueditor
使用React Native如何实现自定义控件底部抽屉菜单
在vue中使用ref 让父组件调用子组件
如何实现web前端页面生成exe
如何实现ajax前台后台跨域请求
下载本文