在使用 Element UI 的 el-dropdown-item 组件时,如果你想监听原生的点击事件(即 DOM 层面的 click),必须加上 .native 修饰符,即使用 @click.native。
原因解释:
el-dropdown-item 是一个 自定义组件,不是原生 HTML 元素。
Vue 中,默认的 @click 监听的是子组件通过 emit('click') 主动触发的事件,而 el-dropdown-item 并没有 emit('click')。
实际上,点击行为发生在该组件内部的原生
- 或 标签上,因此你需要用 .native 来监听组件根元素上的原生 DOM 事件。
正确写法示例:
<el-dropdown-item @click.native="handleClick">选项
错误写法(不会触发):
<el-dropdown-item @click="handleClick">选项
结论:只要你想响应用户点击 el-dropdown-item 的动作,就必须使用 @click.native。这是 Element UI 组件的设计决定的,不是 bug,而是 Vue 自定义组件事件机制的标准行为。