ElementUI中el-dropdown-item点击事件无效问题

ElementUI中el-dropdown-item点击事件无效

若直接在el-dropdown-item上添加click事件，点击后没有任何反应。

在click后添加native修饰符，则可解决问题。

代码如下：

<el-dropdown>
    <span class="user"></span>
    <el-dropdown-menu slot="dropdown">
        <el-dropdown-item @click.native="changePassword">修改密码</el-dropdown-item>
    </el-dropdown-menu>
</el-dropdown>

在给Vue组件（el-dropdown-item就是一个组件）绑定事件的时候，必须加上navtive修饰符才能生效，navtive可以监听根元素的原生事件

el-dropdown-item添加点击事件

问题

Vue引入Element-ui框架，使用其DropDown组件时，发现官网教程并没有给出el-dropdown-item点击事件的使用方法。

因此需要自定义点击事件，也就是需要添加原生的点击事件。

添加点击事件

使用 @click.native=“”，此时就可以实现点击事件了。

<el-dropdown>
  <span class="el-dropdown-link">
    下拉菜单<i class="el-icon-arrow-down el-icon--right"></i>
  </span>
  <el-dropdown-menu slot="dropdown">
    <el-dropdown-item @click.native="handleClick('0')">黄金糕</el-dropdown-item>
    <el-dropdown-item @click.native="handleClick('1')">狮子头</el-dropdown-item>
  </el-dropdown-menu>
</el-dropdown>

了解一下@click.native

• @click

@click 常见于其用在Vue中的事件绑定，而@实际上是 v-on 的简写，而 v-on 则是对 vue 的事件体系封装之后的 API接口。

• native

native修饰符用于处理DOM原生事件，在本文中由于组件 DropDown并没有封装点击事件，因此需要添加原生的点击事件，因此使用@click.native。

扩展@click的其他用法

• @click.stop： 阻止事件冒泡
• @click.prevent： 阻止事件的默认行为 （提交事件不再重载页面）
• @click.capture： 优先触发
• @click.self： 只有自己能触发，子元素无法触发
• @click.once： 只能提交一次（. o n c e .once.once 修饰符还能被用到自定义的组件事件上。）

总结

以上为个人经验，希望能给大家一个参考，也希望大家多多支持。