>[success] # 遞歸組件 ~~~ 1.遞歸組件的使用場景，某些時候會有層級關系數據進行返回，層級嵌套具 體層數未知，因此可以使用遞歸組件這種形式 ~~~ >[info] ## 用菜單組件說明遞歸組件 ~~~ 1.將整個菜單拆成了三個部分。第一部分最外層是個整個菜單的輪廓部分，第二部分 是可以點擊的菜單部分'a-menu-item.vue',第三部分是可以收縮的部分'a-submenu.vue' 三個部分形成嵌套組成組件 ~~~ ~~~ 1.創建組件的結構目錄如下： │ ├── 'components' // 存放組件文件夾 │ │ └── 'menu' // 存放菜單組件的文件夾 │ │ └─ 'a-menu.vue' // 菜單的根目錄最外層 │ │ └─ 'a-menu-item.vue' // 菜單中可點擊的菜單 │ │ └─ 'a-submenu.vue' // 配合a-menu-item.vue使用，最外層的總菜單 │ │ └─ 'index.js' ~~~  >[danger] index.js 導出三個組件 ~~~ import AMenu from './a-menu' import AMenuItem from './a-menu-item' import ASubmenu from './a-submenu' export default { AMenu, AMenuItem, ASubmenu } ~~~ >[danger] ##### a-menu.vue ~~~ 1.只需要留好插槽和固定樣式 ~~~ ~~~ <template> <div class="a-menu"> <slot></slot> </div> </template> <script> export default { name: "AMenu" } </script> <style lang="less"> .a-menu{ & *{ list-style: none; } ul{ padding: 0; margin: 0; } } </style> ~~~ >[danger] ##### a-menu-item.vue ~~~ 1.需要留好菜單的插槽 ~~~ ~~~ <template> <li class="a-menu-item"> <slot></slot> </li> </template> <script> export default { name: "AMenuItem" } </script> <style lang="less"> .a-menu-item{ background: rgb(90,92,104); } </style> ~~~ >[danger] ##### a-submenu.vue ~~~ 1.需要留出兩個部分，一部分是總名稱，另一個部分是專門 放入 'a-menu-item.vue' 預留的插槽, 形成收縮隱藏的效果 ~~~ ~~~ <template> <ul class="a-submenu"> <!--顯示名字--> <div class="a-submenu-title" @click="handleClick"> <slot name="title"></slot> <span class="shrink-icon" :style="{transform: `rotateZ(${showChild? 0:180}deg)`}">^</span> </div> <div v-show="showChild" class="a-submenu-child-box"> <slot></slot> </div> </ul> </template> <script> export default { name: "ASubmenu", data(){ return{ showChild:false } }, methods:{ handleClick(){ this.showChild = !this.showChild } }, } </script> <style lang="less"> .a-submenu{ background: rgb(33,35,39); &-title{ background: rgb(33,35,39); color: #fff; position: relative; .shrink-icon{ position: absolute; top: 0; right: 10px; } } &-child-box{ overflow: hidden; padding-left: 20px; } li{ background: rgb(33,35,39); } } </style> ~~~ >[danger] ##### 在視圖中使用 ~~~ <template> <div class="menu-box"> <a-menu> <a-menu-item>111</a-menu-item> <a-menu-item>222</a-menu-item> <a-submenu> <div slot="title">333</div> <a-menu-item>3333-11</a-menu-item> <a-submenu> <div slot="title">333-22</div> <a-menu-item>3333-22-11</a-menu-item> </a-submenu> </a-submenu> </a-menu> </div> </template> <script> import menuComponents from '_c/menu' export default { name: "menuPage", components:{ ...menuComponents }, } </script> <style scoped lang="less"> .menu-box{ width: 300px; height: 400px; } </style> ~~~