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绑定事件点击不生效内容请搜索脚本之家以前的文章或继续浏览下面的相关文章希望大家以后多多支持脚本之家！
相关文章
这篇文章主要介绍了在 Vue3 中使用 BabylonJs 开发 3D 是什么体验,在本文中，向您展示了如何创建 Vue 组件、Babylon 类、在画布上渲染场景以及创建 3D 网格，需要的朋友可以参考下2022-07-07
组件(Component)是 Vue.js 最强大的功能之一。 组件可以扩展 HTML 元素,封装可重用的代码。下面这篇文章主要给大家介绍了关于Vue.js组件间循环引用的相关资料,文中通过示例代码介绍的非常详细，需要的朋友可以参考下。2017-12-12
van-uploader保存文件到后端回显后端接口返回的数据
前端开发想省时间就是要找框架呀,下面这篇文章主要给大家介绍了关于van-uploader保存文件到后端回显后端接口返回的数据,文中通过实例代码介绍的非常详细,需要的朋友可以参考下2023-06-06
懒加载简单来说就是延迟加载或按需加载，即在需要的时候的时候进行加载。这篇文章主要介绍了vue路由懒加载及组件懒加载 ,需要的朋友可以参考下2019-06-06
Vue是可以自定义指令的,最近学习过程中遇见了一个需要懒加载的功能，发现网上这方面的资料较少，所以下面这篇文章主要给大家介绍了关于Vue.js如何实现路由懒加载的相关资料，需要的朋友可以参考借鉴，下面来一起看看吧。2017-08-08
vue.js默认路由不加载linkActiveClass问题的解决方法
这篇文章主要给大家介绍了关于vue.js默认路由不加载linkActiveClass问题的解决方法，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面来一起看看吧。2017-12-12
vue 如何添加全局函数或全局变量以及单页面的title设置总结
本篇文章主要介绍了vue 如何添加全局函数或全局变量以及单页面的title设置总结，非常具有实用价值，需要的朋友可以参考下2017-06-06
vue3如何添加eslint校验(eslint-plugin-vue)
这篇文章主要介绍了vue3如何添加eslint校验(eslint-plugin-vue),具有很好的参考价值,希望对大家有所帮助,如有错误或未考虑完全的地方,望不吝赐教2024-01-01
这篇文章主要介绍了Vue如何调用接口请求头增加参数，具有很好的参考价值，希望对大家有所帮助。如有错误或未考虑完全的地方，望不吝赐教2023-01-01
这篇文章主要介绍了Jeeplus-vue 实现文件的上传，本文通过实例代码给大家介绍的非常详细，对大家的学习或工作具有一定的参考借鉴价值,需要的朋友可以参考下2022-09-09
最新评论