ElementUI中el-dropdown-item点击事件无效问题
短信预约 -IT技能 免费直播动态提醒
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 修饰符还能被用到自定义的组件事件上。）
总结
以上为个人经验，希望能给大家一个参考，也希望大家多多支持编程网。
免责声明：
① 本站未注明“稿件来源”的信息均来自网络整理。其文字、图片和音视频稿件的所属权归原作者所有。本站收集整理出于非商业性的教育和科研之目的，并不意味着本站赞同其观点或证实其内容的真实性。仅作为临时的测试数据，供内部测试之用。本站并未授权任何人以任何方式主动获取本站任何信息。
② 本站未注明“稿件来源”的临时测试数据将在测试完成后最终做删除处理。有问题或投稿请发送至: 邮箱/279061341@qq.com QQ/279061341
