Vue递归菜单

一、效果图：

二、代码（Vue Cli 快速原型开发）

App.vue

 <template>
     <div id="app">
         <template v-for="item in menus">
                             <!--没有子菜单的直接渲染title -->
                             <Menu :key="item.title" v-if="(item.children.length==0)">
                                 <li class="title">{{item.title}}</li>
                             </Menu>
                             <!--这里还在v-for循环中，在向ReMenu子组件中传递数据是可以绑定item（分别表示menus的三个对象元素） -->

                             <!-- 有子菜单的部分-->
                             <ReMenu v-else :item="item"></ReMenu>
 </template>
     </div>

 </template>

 <script>
     import Menu from './Menu.vue'
     import ReMenu from './ReMenu.vue'
     export default { 
         name: 'app',
         components: {
             Menu,
             ReMenu
         },
         data() {
             return {
                 msg: "递归菜单",
                 menus: [{
                         "path": "/func1",
                         "title": "功能1",
                         "children": [{
                             "title": "功能1-1",
                             "children": [{
                                     "title": "功能1-1-1",
                                     "children": [{
                                             "title": "功能1-1-1-1",
                                             "children": []
                                         },
                                         {
                                             "title": "功能1-1-1-2",
                                             "children": []
                                         }, {
                                             "title": "功能1-1-1-3",
                                             "children": []
                                         },
                                     ]
                                 },
                                 {
                                     "title": "功能1-1-2",
                                     "children": []
                                 }, {
                                     "title": "功能1-1-3",
                                     "children": []
                                 },
                             ]
                         }, {
                             "title": "功能1-2",
                             "children": []
                         }, {
                             "title": "功能1-3",
                             "children": []
                         }, ]
                     },
                     {
                         "title": "功能2",
                         "children": [{
                             "title": "功能2-1",
                             "children": []
                         }, {
                             "title": "功能2-2",
                             "children": []
                         }, {
                             "title": "功能2-3",
                             "children": []
                         }, ]
                     },
                     {
                         "title": "功能3",
                         "children": [{
                             "title": "功能3-1",
                             "children": []
                         }, {
                             "title": "功能3-2",
                             "children": []
                         }, {
                             "title": "功能3-3",
                             "children": [{
                                 "title": "功能3-3-1",
                                 "children": []
                             }, {
                                 "title": "功能3-3-2",
                                 "children": []
                             }, {
                                 "title": "功能3-3-3",
                                 "children": []
                             }]
                         }, ]
                     },
                     {
                         "title": "功能4",
                         "children": []
                     }
                 ]
             }
         },
     }
 </script> 

Menu.App

 <template>
   <ul>
     <slot></slot>
   </ul>
 </template>

 <script>
   export default {
     name: "Menu",
     props: ["msg","menus"]  
   }
 </script>

MenuItem.app

 <template>
     <ul>
         <li @click="change" class="title">
             <slot name="title">默认值</slot>
         </li>

         <li v-show="flag" style="list-style:none">
             <slot name="content">默认值</slot>
         </li>
     </ul>
 </template>

 <script>
     export default {
         name: "MenuItem",
         data() {
             return {
                 flag:false
             }
         },
         methods: {
             change(){
                 this.flag=!this.flag
             }
         },
     }
 </script>

 <style >
     .title{
         cursor:pointer;
     }
 </style>

Remenu.Vue

 <template>
     <MenuItem>
         <template v-slot:title>
             <li :key="item.title">{{item.title}}</li>
         </template>

         <template v-slot:content>
             <ul v-for="child in item.children" v-if="(child.children.length==0)">{{child.title}}</ul>
             <ReMenu v-else :item="child"></ReMenu>
         </template>
     </MenuItem>

 </template>
 <script>
     import MenuItem from './MenuItem.vue'
     export default {
         // mounted() {
         //     console.log(this.item)
         // },
         name: "ReMenu",
         components: {
             MenuItem,
         },
         props: ["item"]
     }
 </script>