? ? ? ? 管理系統中很多這樣樹形菜單顯示的，這里要用到組件的遞歸來完成，這里我們來學習下vue關于組件遞歸的實現。
實現原理
? ? ? ?遞歸的原理無非就是自己調用自己，來實現無限循環，但是遞歸需要有邊界條件、遞歸前進段和遞歸返回段。當邊界條件不滿足時，遞歸前進；當邊界條件滿足時，遞歸返回。否則會無限死循環，程序報錯。
代碼實現
子組件
父組件
數據類型
menuList: [
? ? ? ? {
? ? ? ? ? id: "2",
? ? ? ? ? resourceName: "微信公眾號",
? ? ? ? ? resourceDes: "",
? ? ? ? ? resourceIco: "el-icon-success",
? ? ? ? ? resourceType: "2",
? ? ? ? ? parentId: "",
? ? ? ? ? appId: "2",
? ? ? ? ? resourceUrl: "",
? ? ? ? ? resourceAttr: ""
? ? ? ? },
? ? ? ? {
? ? ? ? ? id: "3",
? ? ? ? ? resourceName: "一級",
? ? ? ? ? resourceDes: "",
? ? ? ? ? resourceIco: "el-icon-warning",
? ? ? ? ? resourceType: "2",
? ? ? ? ? parentId: "",
? ? ? ? ? appId: "4aab7a01a8304b7f8f1906073169a30f",
? ? ? ? ? resourceUrl: "",
? ? ? ? ? resourceAttr: "",
? ? ? ? ? children: [
? ? ? ? ? ? {
? ? ? ? ? ? ? id: "4",
? ? ? ? ? ? ? resourceName: "二級",
? ? ? ? ? ? ? resourceDes: "",
? ? ? ? ? ? ? resourceIco: "el-icon-circle-plus",
? ? ? ? ? ? ? resourceType: "2",
? ? ? ? ? ? ? parentId: "3",
? ? ? ? ? ? ? appId: "4aab7a01a8304b7f8f1906073169a30f",
? ? ? ? ? ? ? resourceUrl: "/app/unitList",
? ? ? ? ? ? ? resourceAttr: "",
? ? ? ? ? ? ? children: [
? ? ? ? ? ? ? ? {
? ? ? ? ? ? ? ? ? id: "4-1",
? ? ? ? ? ? ? ? ? resourceName: "三級",
? ? ? ? ? ? ? ? ? resourceDes: "",
? ? ? ? ? ? ? ? ? resourceIco: "el-icon-circle-close",
? ? ? ? ? ? ? ? ? resourceType: "2",
? ? ? ? ? ? ? ? ? parentId: "4",
? ? ? ? ? ? ? ? ? appId: "4aab7a01a8304b7f8f1906073169a30f",
? ? ? ? ? ? ? ? ? resourceUrl: "/app/unitList",
? ? ? ? ? ? ? ? ? resourceAttr: "",
? ? ? ? ? ? ? ? ? children: [
? ? ? ? ? ? ? ? ? ? {
? ? ? ? ? ? ? ? ? ? ? id: "4-1-1",
? ? ? ? ? ? ? ? ? ? ? resourceName: "四級",
? ? ? ? ? ? ? ? ? ? ? resourceDes: "",
? ? ? ? ? ? ? ? ? ? ? resourceIco: "el-icon-date",
? ? ? ? ? ? ? ? ? ? ? resourceType: "2",
? ? ? ? ? ? ? ? ? ? ? parentId: "4-1",
? ? ? ? ? ? ? ? ? ? ? appId: "4aab7a01a8304b7f8f1906073169a30f",
? ? ? ? ? ? ? ? ? ? ? resourceUrl: "/text",
? ? ? ? ? ? ? ? ? ? ? resourceAttr: ""
? ? ? ? ? ? ? ? ? ? }
? ? ? ? ? ? ? ? ? ]
? ? ? ? ? ? ? ? }
? ? ? ? ? ? ? ]
? ? ? ? ? ? },
? ? ? ? ? ? {
? ? ? ? ? ? ? id: "5",
? ? ? ? ? ? ? resourceName: "部門管理",
? ? ? ? ? ? ? resourceDes: "",
? ? ? ? ? ? ? resourceIco: "el-icon-document",
? ? ? ? ? ? ? resourceType: "2",
? ? ? ? ? ? ? parentId: "3",
? ? ? ? ? ? ? appId: "4aab7a01a8304b7f8f1906073169a30f",
? ? ? ? ? ? ? resourceUrl: "/app/deptList",
? ? ? ? ? ? ? resourceAttr: ""
? ? ? ? ? ? },
? ? ? ? ? ? {
? ? ? ? ? ? ? id: "3-5",
? ? ? ? ? ? ? resourceName: "用戶管理",
? ? ? ? ? ? ? resourceDes: "",
? ? ? ? ? ? ? resourceIco: "el-icon-edit",
? ? ? ? ? ? ? resourceType: "2",
? ? ? ? ? ? ? parentId: "3",
? ? ? ? ? ? ? appId: "4aab7a01a8304b7f8f1906073169a30f",
? ? ? ? ? ? ? resourceUrl: "/app/usersList",
? ? ? ? ? ? ? resourceAttr: ""
? ? ? ? ? ? },
? ? ? ? ? ? {
? ? ? ? ? ? ? id: "3-6",
? ? ? ? ? ? ? resourceName: "授權",
? ? ? ? ? ? ? resourceDes: "",
? ? ? ? ? ? ? resourceIco: "el-icon-location-outline",
? ? ? ? ? ? ? resourceType: "2",
? ? ? ? ? ? ? parentId: "3",
? ? ? ? ? ? ? appId: "4aab7a01a8304b7f8f1906073169a30f",
? ? ? ? ? ? ? resourceUrl: "",
? ? ? ? ? ? ? resourceAttr: ""
? ? ? ? ? ? }
? ? ? ? ? ]
? ? ? ? },
? ? ? ? {
? ? ? ? ? id: "6",
? ? ? ? ? resourceName: "應用管理",
? ? ? ? ? resourceDes: "",
? ? ? ? ? resourceIco: "el-icon-menu",
? ? ? ? ? resourceType: "2",
? ? ? ? ? parentId: "",
? ? ? ? ? appId: "4aab7a01a8304b7f8f1906073169a30f",
? ? ? ? ? resourceUrl: "/app/appManage",
? ? ? ? ? resourceAttr: ""
? ? ? ? },
? ? ? ? {
? ? ? ? ? id: "8",
? ? ? ? ? resourceName: "應用管理New",
? ? ? ? ? resourceDes: "",
? ? ? ? ? resourceIco: "el-icon-bell",
? ? ? ? ? resourceType: "2",
? ? ? ? ? parentId: "",
? ? ? ? ? appId: "4aab7a01a8304b7f8f1906073169a30f",
? ? ? ? ? resourceUrl: "/app/AppManagelication",
? ? ? ? ? resourceAttr: ""
? ? ? ? }
? ? ? ]
