前言

學習vue有一段時間了,最近使用vue做了一套后臺管理系統(tǒng),其中使用最多就是遞歸組件,也因為自己對官方文檔的不熟悉使得自己踩了不少坑,今天寫出來和大家一起分享。

遞歸組件

組件在它的模板內(nèi)可以遞歸地調用自己,只有當它有 name 選項時才可以。 在官網(wǎng)這句話就是關鍵定義組件是一定要有name屬性。按照這個思路我們開動吧。

實現(xiàn)最終效果圖:

 

模擬數(shù)據(jù)格式如下:

復制代碼
var data = [{ "id": "1", "data": { "menuName": "項目管理", "menuCode": "",
                }, "childTreeNode": [{ "data": { "menuName": "項目", "menuCode": "BusProject",
                    }, "childTreeNode": []
                }, { "data": { "menuName": "我的任務", "menuCode": "BusProject",
                    }, "childTreeNode": []
                }, { "data"