这篇文章主要讲解了“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可以监听根元素的原生事件
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
@click 常见于其用在Vue中的事件绑定，而@实际上是 v-on 的简写，而 v-on 则是对 vue 的事件体系封装之后的 API接口。
native
native修饰符用于处理DOM原生事件，在本文中由于组件 DropDown并没有封装点击事件，因此需要添加原生的点击事件，因此使用@click.native。
@click.stop： 阻止事件冒泡
@click.prevent： 阻止事件的默认行为 （提交事件不再重载页面）
@click.capture： 优先触发
@click.self： 只有自己能触发，子元素无法触发
@click.once： 只能提交一次（. o n c e .once.once 修饰符还能被用到自定义的组件事件上。）
感谢各位的阅读，以上就是“ElementUI中el-dropdown-item点击事件无效怎么解决”的内容了，经过本文的学习后，相信大家对ElementUI中el-dropdown-item点击事件无效怎么解决这一问题有了更深刻的体会，具体使用情况还需要大家实践验证。这里是亿速云，小编将为大家推送更多相关知识点的文章，欢迎关注！
免责声明：本站发布的内容（图片、视频和文字）以原创、转载和分享为主，文章观点不代表本网站立场，如果涉及侵权请联系站长邮箱：is@yisu.com进行举报，并提供相关证据，一经查实，将立刻删除涉嫌侵权内容。
