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>