前言

最近工作中遇到一個需求，由于項目需要一個解析 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 事件，用于獲取特定節點的樹數據，而孩子的數據，則通過遞歸機制不斷向上一層級傳遞，類似于“冒泡機制”。

總結

以上就是這篇文章的全部內容了，希望本文的內容對大家的學習或者工作具有一定的參考學習價值，如果有疑問大家可以留言交流，謝謝大家對武林網的支持。