Vue中使用event的坑及解决event is not defined
作者：前端小怪兽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函数中。
总结
以上为个人经验，希望能给大家一个参考，也希望大家多多支持脚本之家。