vue中@click绑定事件点击不生效的解决
更新时间：2022年08月05日 14:34:16 作者：Jiang_JY
这篇文章主要介绍了vue中@click绑定事件点击不生效的解决方案，具有很好的参考价值，希望对大家有所帮助。如有错误或未考虑完全的地方，望不吝赐教
@click绑定事件点击不生效
原因
根据Vue2.0官方文档关于父子组件通讯的原则，父组件通过prop传递数据给子组件，子组件触发事件给父组件。但父组件想在子组件上监听自己的click的话，需要加上native修饰符。
解决方法
方法1：在@click后加上.native（监听根元素的原生事件，使用 .native 修饰符）
@click.native = "..."
方法2：向外发送click事件
在 methods 内添加 _click 方法：
methods: {
_click: function () {
this.$emit('click', function () {
//...
})
}
}@click中不能使用三则表达式原因
@click="urgentchargeTime?urgentTime:''" //这么写的话会让vue执行的时候去data里面查找,但是我们是要用的函数
修改为：
@click="urgentchargeTime?urgentTime():''" //vue通过第一个数去data里面找,然后通过data里面的值进行去查找函数对象里面的函数
以上为个人经验，希望能给大家一个参考，也希望大家多多支持脚本之家。
相关文章
这篇文章主要介绍了Vue+Express实现登录,注销功能，本文通过实例代码讲解的非常详细，具有一定的参考借鉴价值,需要的朋友可以参考下2019-05-05
这篇文章主要介绍了Vue.js实现的表格增加删除demo,结合实例形式分析了vue.js数据绑定及元素增加、删除等相关操作技巧,需要的朋友可以参考下2018-05-05
这篇文章主要介绍了vue离开页面时如何销毁定时器，具有很好的参考价值，希望对大家有所帮助。如有错误或未考虑完全的地方，望不吝赐教2022-05-05
这篇文章主要介绍了VUE实现一个Flappy Bird的示例代码，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧2021-04-04
vue-router重写push方法,解决相同路径跳转报错问题
这篇文章主要介绍了vue-router重写push方法,解决相同路径跳转报错问题，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧2020-08-08
这篇文章主要为大家剖析了Vue原理，实现双向绑定MVVM，具有一定的参考价值，感兴趣的小伙伴们可以参考一下2017-05-05
这篇文章主要介绍了Vue组件之间的参数传递与方法调用,本文通过实例代码给大家介绍的非常详细，对大家的学习或工作具有一定的参考借鉴价值，需要的朋友可以参考下2022-12-12
当一个组件需要获取多个状态的时候,将这些状态都声明为计算属性会有些重复和冗余,为了解决这个问题我们可以使用mapState辅助函数帮助我们生成计算属性,这篇文章主要给大家介绍了关于vuex状态管理之mapState用法的相关资料,需要的朋友可以参考下2023-12-12
vue-router3.x和vue-router4.x相互影响的问题分析
这篇文章主要介绍了vue-router3.x和vue-router4.x相互影响的问题分析,本文给大家介绍的非常详细，对大家的学习或工作具有一定的参考借鉴价值，需要的朋友可以参考下2023-04-04
这篇文章主要给大家介绍了关于Vue入门的相关资料，是一篇超完整的Vue入门教程，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧2020-11-11
最新评论