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> ~~~