【区分vue2和vue3下的element UI NavMenu 导航菜单组件，分别详细介绍属性，事件，方法如何使用，并举例】

07-01 1391阅读

在 Element UI（针对 Vue 2）和 Element Plus（针对 Vue 3）中，NavMenu 导航菜单组件通常被称为 el-menu。虽然两个版本在 API 和实现上可能有一些细微的差别，但基本概念和用法是相似的。下面我将分别介绍在 Vue 2 的 Element UI 和 Vue 3 的 Element Plus 中如何使用 el-menu 组件。

【区分vue2和vue3下的element UI NavMenu 导航菜单组件，分别详细介绍属性，事件，方法如何使用，并举例】

（图片来源网络，侵删）

Vue 2 + Element UI

在 Vue 2 的 Element UI 中，el-menu 组件用于创建导航菜单。

属性（Props）

mode：菜单模式，如 horizontal（水平）或 vertical（垂直）。
default-active：默认激活的菜单项的索引。
default-openeds：默认展开的菜单项的索引数组（仅当 mode 为 vertical 时有效）。
unique-opened：是否只保持一个子菜单的展开（仅当 mode 为 vertical 时有效）。
router：是否启用路由模式。
background-color：菜单的背景色。
text-color：菜单的文字颜色。
active-text-color：当前激活菜单的文字颜色。
…（还有其他属性，具体请参考 Element UI 官方文档）
事件（Events）
- select：当菜单项被点击时触发。
- open：当子菜单展开时触发。
- close：当子菜单关闭时触发。
- …（还有其他事件，具体请参考 Element UI 官方文档）
  示例
```
  
    处理中心
    
      我的工作台
      选项1
      选项2
    
    
  


export default {
  data() {
    return {
      activeIndex: '1'
    };
  },
  methods: {
    handleSelect(key, keyPath) {
      console.log(key, keyPath);
      this.activeIndex = key;
    }
  }
};
```
  Vue 3 + Element Plus
  
  在 Vue 3 的 Element Plus 中，el-menu 组件的用法与 Vue 2 的 Element UI 类似，但可能会有一些 API 变动和新增功能。
  
  属性（Props）和事件（Events）
  
  Element Plus 的 el-menu 组件的大部分属性和事件与 Element UI 保持一致，但可能会有一些细微的差别或新增的属性/事件。
  
  示例（假设与 Element UI 类似）
```
  
    处理中心
    
      
        我的工作台
      
      选项1
      选项2
    
    
  


import { ref } from 'vue';
const activeIndex = ref('1');
function handleSelect(key, keyPath) {
  console.log(key, keyPath);
  activeIndex.value = key;
}
```
  注意：由于 Element Plus 还在不断发展中，具体的 API 和使用方法可能会有所不同