介绍
这是一个是基于element-UI的导航菜单组件基础上,进行了二次封装的菜单组件,该组件以组件递归的方式,实现了可根据从后端接收到的json菜单数据,动态渲染多级菜单的功能。
使用方法
由于该组件是基于element-UI进行二次封装的,所以在使用该组件时请务必安装element-UI(安装方式猛戳这里),安装好element-UI后,只需将该组件文件夹SideBar导入到现有项目中即可使用。
工作流程
组件封装好之后,由父组件调用该组件,父组件先向后端发送请求获取菜单数据,然后将菜单数据传递给封装好的菜单组件,菜单组件通过解析数据,完成菜单渲染。
使用示例
import Sidebar from './SideBar/SideBar.vue'
export default {
name: 'app',
components: { Sidebar},
data() {
return {
menuList,
}
}
}
选项
属性
描述
类型
是否必须
menuList
由后端返回的菜单数据
Array
是
菜单数据格式示例
{
"menuList" : [
{
"path": "/func1", //菜单项所对应的路由路径