Vue实现嵌套菜单组件

最新推荐文章于 2025-03-17 17:53:41 发布

没你好看

最新推荐文章于 2025-03-17 17:53:41 发布

阅读量795

点赞数

文章标签： vue.js javascript 前端

本文链接：https://blog.youkuaiyun.com/qq_51218646/article/details/123107432

版权

该博客介绍了如何使用Vue.js来创建一个嵌套菜单组件，包括安装mock.js进行数据模拟，以及菜单组件的实现和使用方法。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

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

animationww

安装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": "第三层"