UI -- 正式使用遞歸菜單 · Vue&&TypeSprict--基礎總結

>[success] # 正式使用 ~~~ 1.上篇文章將這個菜單組件拆分成三個部分依次是： 1.1'a-menu.vue' 用來負責整菜單樣式，因此不是我們遞歸目標 1.2'a-menu-item' 用來展示可以點擊的菜單，根據下面數據分析只要沒有children的就展示即可因此也不是遞歸對象 1.3'a-submenu.vue' 是需要嵌套進'a-menu-item.vue' 因此整體需要遞歸 ~~~ >[info] ## 使用和二次遞歸封裝 ~~~ 1.根據上面分析所以需要把上面1.3步驟進行重新的封裝方便遞歸使用 ~~~ >[danger] ##### 封裝一個遞歸組件 ~~~ <template> <a-submenu> <div slot="title">{{ parent.title }}</div> <template v-for="(item, i) in parent.children"> <a-menu-item v-if="!item.children" :key="`menu_item_${index}_${i}`">{{ item.title }}</a-menu-item>  <re-submenu v-else :key="`menu_item_${index}_${i}`" :parent="item"></re-submenu> </template> </a-submenu> </template> <script> import menuComponents from '_c/menu' const { AMenuItem, ASubmenu } = menuComponents export default { name: 'ReSubmenu', components: { AMenuItem, ASubmenu }, props: { parent: { type: Object, default: () => ({}) }, index: Number } } </script> ~~~ >[danger] ##### 使用 ~~~ <template> <div class="menu-box">  <a-menu> <template v-for="(item, index) in list"> <a-menu-item v-if="!item.children" :key="`menu_item_${index}`">{{ item.title }}</a-menu-item> <re-submenu v-else :key="`menu_item_${index}`" :parent="item" :index="index"></re-submenu> </template> </a-menu> </div> </template> <script> import menuComponents from '_c/menu' import ReSubmenu from './re-submenu.vue' const { AMenu, AMenuItem, ASubmenu } = menuComponents export default { name: 'menu_page', components: { AMenu, AMenuItem, ASubmenu, ReSubmenu }, data () { return { list: [ { title: '1111' }, { title: '2222' }, { title: '3333', children: [ { title: '3333-1' }, { title: '3333-2', children: [ { title: '3333-2-1' }, { title: '3333-2-2' }, { title: '3333-2-3', children: [ { title: '3333-2-3-1' }, { title: '3333-2-3-2' } ] } ] } ] } ] } } } </script> <style lang="less"> .menu-box{ width: 300px; height: 400px; } </style> ~~~