[TOC] >[success] # vue遞歸組件 一般只有樹形的結構的數據需要用到遞歸組件，也是頭一次用，參考[案例網站](https://blog.csdn.net/zhaoxiang66/article/details/80940762)，遞歸組件的顯示隱藏需要后臺在接口數據增加一個字段，來控制顯示隱藏，或者前端自己手動在數據里面加一個的屬性，值為布爾值，最好由后臺來加這個字段因為前臺加這個字段需要循環每一層樹的數據在里面加一個屬性 >[success]### 父級組件寫法 使用時候只需要傳入2個自定義屬性一個folder，渲染的數據列表，一個select自定義屬性里面傳遞一個自定義方法，用來控制樹節點的點擊事件 **src/views/parent.vue** ~~~ // html部分 <template> <bimTree :folder = "componentInfo.structureInfo" :select = "select" /> </template> // js部分 <script> import bimTree from '@/component/bimTree/bimTree' // 引入子組件 export default { components:{ bimTree }, data(){ return{ componentInfo: { // 列表數據 structureInfo: [{ "id": 2, "code": "1.1", "parentCode": "1", "nodeType": "StructureType", "name": "上部結構", "level": 1, "hasChild": true, "isDeck": false, "isShow": false, "subList": [{ "id": 5, "code": "1.1.1", "parentCode": "1.1", "nodeType": "UnitCode", "name": "上部承重構件", "level": 2, "hasChild": true, "isDeck": false, "isShow": false, "subList": [{ "id": 21, "code": "1.1.1.1", "parentCode": "1.1.1", "nodeType": "SubUnitCode", "name": "主梁", "level": 3, "hasChild": false, "isDeck": false, "isShow": false }] }, { "id": 6, "code": "1.1.2", "parentCode": "1.1", "nodeType": "UnitCode", "name": "上部一般構件", "level": 2, "hasChild": true, "isDeck": false, "isShow": false, "subList": [{ "id": 23, "code": "1.1.2.1", "parentCode": "1.1.2", "nodeType": "SubUnitCode", "name": "橫隔板", "level": 3, "hasChild": false, "isDeck": false, "isShow": false }] }, { "id": 7, "code": "1.1.3", "parentCode": "1.1", "nodeType": "UnitCode", "name": "支座", "level": 2, "hasChild": true, "isDeck": false, "isShow": false, "subList": [{ "id": 25, "code": "1.1.3.1", "parentCode": "1.1.3", "nodeType": "SubUnitCode", "name": "橡膠支座", "level": 3, "hasChild": false, "isDeck": false, "isShow": false }] }] }] } } } }, methods:{ select(data){ // 點擊樹節點時候顯示隱藏對應的節點 // isShow 為接口字段返回的布爾值 data.isShow = !data.isShow } } </script> ~~~ >[success]### 子級組件寫法 子組件需要把樹形的樣式寫出來，然后來循環，這里需要注意到`li里面的 bimTree `實際上就是在根據item里面是否有isShow（正常應該用child這樣的一個列表判斷）來控制是否繼續渲染子菜單，一直到isShow為false為止，還有一點需要注意在span元素上需要綁定父組件傳過來的事件，把item傳過去即可這樣每次點擊對應的節點時候就能取到對應的item節點數據 **@/component/bimTree/bimTree** ~~~ // html部分 <template> <div> <ul class="list"> <li v-for = "(item,index) in folder" :key="index"> <span @click = "select(item)">{{item.name}}</span> <van-icon name="arrow-down" :class="item.isShow ? 'van-icon-arrow-click' : ''" v-if="'subList' in item || 'diseasePartList' in item || 'diseaseList' in item"/> <van-icon name="arrow" v-if="item.locationDesc"/> <transition name="fade"> <bimTree v-if = "item.isShow" :folder = "item.subList || item.diseasePartList || item.diseaseList" :select = "select" /> </transition> </li> </ul> </div> </template> // js部分 <script> export default { name:'bimTree', components:{ [Icon.name]:Icon }, props:['folder','select'] } </script> ~~~