如何将Vue3封装Element Plus Menu无限级菜单组件功能改写为长尾？

本文共计2345个文字，预计阅读时间需要10分钟。

目录 + 1 数据结构定义 + 1.1 菜单项数据结构 + 1.2 菜单配置数据结构 + 2 使用 Tsx 实现封装 + 2.1 Tsx 基本结构 + 2.2 定义 Prop + 2.3 递归实现组件 + 3 使用 SFC 实现菜单封装 + 3.1 封装菜单项渲染 + 3.2 封装菜单组件

目录

• 1 数据结构定义
• 1.1 菜单项数据结构
• 1.2 菜单配置数据结构
• 2 使用 tsx 实现封装
• 2.1 tsx 基本结构
• 2.2 定义 prop
• 2.3 递归实现组件
• 3 使用 SFC 实现菜单封装
• 3.1 封装菜单项的渲染
• 3.2 封装菜单组件
• 4 测试组件
• 4.1 菜单测试数据
• 4.2 测试页面
• 4.3 运行效果
• 总结：

本文分别使用 SFC（模板方式）和 tsx 方式对 Element Plus el-menu 组件进行二次封装，实现配置化的菜单，有了配置化的菜单，后续便可以根据路由动态渲染菜单。