Vue实现嵌套菜单组件

本案例为大家分享了Vue实现嵌套菜单组件的具体代码，供大家参考，具体内容如下

本文旨在使用Vue.js完成一个嵌套的菜单组件，使用mock.js对数据进行模拟，并且最小化复现功能

安装mock

cnpm i mockjs

//引入mockjs
import Mock from 'mockjs'

//使用mockjs模拟数据
Mock.mock('/menuData', 'get', {
    "ret": 0,
    "data": [{
            "id": 1,
            "name": "第一层",
            "children": [{
                    "name": "第二层"
                },
                {
                    "name": "第二层"
                },
                {
                    "name": "第二层"
                }
            ]
        },
        {
            "id": 2,
            "name": "第一层",
            "children": [{
                    "name": "第二层"
                },
                {
                    "id": 3,
                    "name": "第二层",
                    "children": [{
                            "name": "第三层"
                        },
                        {
                            "name": "第三层"
                        },
                        {
                            "name": "第三层"
                        }
                    ]
                },
                {
                    "id": 4,

                    "name": "第二层",
                    "children": [{
                            "name": "第三层"
                        },
                        {
                            "name": "第三层"
                        },
                        {
                            "id": 5,
                            "name": "第三层",
                            "children": [{
                                    "name": "第四层"
                                },
                                {
                                    "name": "第四层"
                                },
                                {
                                    "id": 6,
                                    "name": "第四层",
                                    "children": [{
                                            "name": "第五层"
                                        },
                                        {
                                            "name": "第五层"
                                        },
                                        {
                                            "name": "第五层"
                                        }
                                    ]
                                }
                            ]
                        }
                    ]
                }
            ]
        }
    ]
});

菜单组件

使用菜单组件

以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持脚本之家。