vue中@click绑定事件点击不生效的原因及解决方案
更新时间：2022年12月07日 10:35:25 作者：Jiang_JY
根据Vue2.0官方文档关于父子组件通讯的原则，父组件通过prop传递数据给子组件，子组件触发事件给父组件，这篇文章主要介绍了vue中@click绑定事件点击不生效的解决方案,需要的朋友可以参考下
原因：
根据Vue2.0官方文档关于父子组件通讯的原则，父组件通过prop传递数据给子组件，子组件触发事件给父组件。但父组件想在子组件上监听自己的click的话，需要加上native修饰符。
解决方法：
方法1：在@click后加上.native（监听根元素的原生事件，使用 .native 修饰符）
@click.native = "..."
方法2：向外发送click事件
在 methods 内添加 _click 方法：
methods: {
_click: function () {
this.$emit('click', function () {
//...
})
}
}扩展知识点：
Vue中@click不生效的解决办法
问题产生的原因：
如果是普通的HTML，@click可以触发。
如果是使用ElementUI组件和路由，@click会失效。
因为Vue使用的是一套自己的事件传递机制，@click等事件是经过Vue封装的，需要为 @click 添加标识符 .native
<el-button type="primary" @click.native="clickFunction()">点击按钮</el-button>
到此这篇关于vue中@click绑定事件点击不生效的解决方案的文章就介绍到这了,更多相关vue中@click绑定事件点击不生效内容请搜索脚本之家以前的文章或继续浏览下面的相关文章希望大家以后多多支持脚本之家！
相关文章
这篇文章主要为大家详细介绍了基于vue2实现左滑删除功能，具有一定的参考价值，感兴趣的小伙伴们可以参考一下2017-11-11
这篇文章主要介绍了vue中利用iscroll.js解决pc端滚动问题，本文给大家介绍的非常详细，具有一定的参考借鉴价值,需要的朋友可以参考下2020-02-02
这篇文章主要为大家详细介绍了Vue表情输入组件，微信face表情组件，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下2019-02-02
这篇文章主要介绍了使用vuepress搭建静态博客的示例代码，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧2019-02-02
今天小编就为大家分享一篇vue里input根据value改变背景色的实例，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧2018-09-09
这篇文章主要介绍了Vue组件化开发的思考以及相关的原理介绍，如果你对此有兴趣，可以学习参考下。2018-02-02
element-ui修改el-form-item样式的详细示例
在使用element-ui组件库的时候经常需要修改原有样式,下面这篇文章主要给大家介绍了关于element-ui修改el-form-item样式的详细示例,文中通过实例代码介绍的非常详细,需要的朋友可以参考下2022-11-11
这篇文章主要介绍了vue项目打包之后在本地运行的实现方法，具有很好的参考价值，希望对大家有所帮助。如有错误或未考虑完全的地方，望不吝赐教2022-07-07
Vue中computed、methods与watch的区别总结
这篇文章主要给大家介绍了关于Vue中computed、methods与watch区别的相关资料，文中通过示例代码介绍的非常详细，对大家学习或者使用Vue具有一定的参考学习价值，需要的朋友们下面来一起学习学习吧2019-04-04
在 Vue 中，命名规范是一个非常重要的话题，驼峰命名和短横线分割命名都有其各自的优缺点和适用场景，开发者需要根据实际情况进行选择，这篇文章主要介绍了Vue 中驼峰命名与短横线分割命名作用及区别介绍,需要的朋友可以参考下2023-05-05
最新评论