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函数中。
总结
以上为个人经验，希望能给大家一个参考，也希望大家多多支持脚本之家。
相关文章
这篇文章主要为大家详细介绍了vue使用echarts图表的详细方法，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下2018-10-10
这篇文章主要介绍了Vue驼峰与短横线分割命名中的注意事项，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习吧2023-02-02
本篇文章主要介绍了Vue学习笔记进阶篇之多元素及多组件过渡，具有一定的参考价值，感兴趣的小伙伴们可以参考一下2017-07-07
这篇文章主要介绍了vue中如何实现pdf文件预览的方法，小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧2018-07-07
在 Vue 3 中,动态组件是一种允许在运行时动态切换组件的机制,本文主要为大家详细介绍了动态组件在Vue3中的具体使用,感兴趣的小伙伴可以了解下2024-01-01
详解Vue3 Composition API中的提取和重用逻辑
这篇文章主要介绍了Vue3 Composition API中的提取和重用逻辑，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧2020-04-04
kkFileView是git的开源在线文件预览项目，这篇文章主要介绍了KKFileView结合vue多格式文件在线预览功能，本文给大家介绍的非常详细,需要的朋友可以参考下2024-02-02
这篇文章主要介绍了vue后台管理之动态加载路由的方法,小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧2018-08-08
这篇文章主要介绍了vue3 携带参数跳转|router传参方式，具有很好的参考价值，希望对大家有所帮助。如有错误或未考虑完全的地方，望不吝赐教2022-06-06
uniapp中使用u-loadmore,loadText内容不随status改变刷新方式
这篇文章主要介绍了uniapp中使用u-loadmore,loadText内容不随status改变刷新方式,具有很好的参考价值,希望对大家有所帮助,如有错误或未考虑完全的地方,望不吝赐教2024-05-05
最新评论