Vue中使用event的坑及解决event is not defined
更新时间：2024年03月24日 09:24:07 作者：前端小怪兽zmy
这篇文章主要介绍了Vue中使用event的坑及解决event is not defined,具有很好的参考价值,希望对大家有所帮助,如有错误或未考虑完全的地方,望不吝赐教
vue使用event坑event is not defined
情况一：
mounted() {
window.addEventListener('click', this.measureDistance) //调用的时候没有括号
},
methods:{
measureDistance(event) {
console.log(event)
}
}情况二：
//template部分：
<img src="./img/distance.png"class="operationIcon" /><span class="operationText"
@click="test($event)">测距</span> //有$符号
//js部分
methods: {
test(event) {
console.log(event)
}
}vue使用eventBus遇到数据不更新
问题关键点
在于路由跳转时，组件之间的执行顺序导致事件绑定或者事件调用没有生效。
执行顺序
新组件beforeCreate——新组件created——新组件beforeMount——旧组件beforeDestroy——旧组件destroyed——新组件mounted。
咱们在旧组件的事件中使用emit触发函数调用，这时新组件的created钩子进行on绑定函数已经晚了。
解决方案
新组件绑定事件放在created中。旧组件触发事件放在destroyed函数中。
总结
以上为个人经验，希望能给大家一个参考，也希望大家多多支持脚本之家。
相关文章
这篇文章主要介绍了vue2.x引入threejs,如果在开发过程中出现threejs生成的canvas出现外边框,只需要用css样式修改，本文通过实例代码给大家介绍的非常详细，需要的朋友可以参考下2022-09-09
插槽（slot）可以说在一个 Vue 项目里面处处都有它的身影，比如我们使用一些UI 组件库的时候，我们通常可以使用插槽来自定义我们的内容，今天通过本文给大家介绍vue3插槽slot的相关知识，感兴趣的朋友一起看看吧2022-08-08
这篇文章主要介绍了vue 验证两次输入的密码是否一致的方法示例，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧2020-09-09
这篇文章主要介绍了Vue 子组件更新props中的属性值问题，具有很好的参考价值，希望对大家有所帮助。如有错误或未考虑完全的地方，望不吝赐教2022-10-10
这篇文章主要介绍了vue ref如何获取子组件属性值。具有很好的参考价值，希望对大家有所帮助。如有错误或未考虑完全的地方，望不吝赐教2022-03-03
这篇文章主要为大家介绍了JointJS流程图的绘制方法，具有一定的参考价值，感兴趣的小伙伴们可以参考一下2018-12-12
这篇文章主要为大家介绍了JS图片懒加载库VueLazyLoad示例详解，有需要的朋友可以借鉴参考下，希望能够有所帮助，祝大家多多进步，早日升职加薪2023-02-02
本文重点介绍axios如何配合vue搭建项目框架,文章给大家介绍的非常详细，具有一定的参考借鉴价值，需要的朋友参考下吧2018-07-07
在Vue中最重要、最核心的概念之一就是响应式系统。这个系统使得Vue能够自动追踪数据变化，并在数据发生变化时自动更新相关的DOM元素。本文将会探讨Vue响应式系统的实现原理及其底层实现2023-03-03
这篇文章主要介绍了vue 解决移动端弹出键盘导致页面fixed布局错乱的问题,通过实例代码给大家分享解决方案，对vue 移动端弹出键盘相关知识感兴趣的朋友一起看看吧2022-04-04
最新评论