首页 > 网络编程 > JavaScript > javascript类库 > vue.js > Vue使用event坑event is not defined

Vue中使用event的坑及解决event is not defined

2024-03-24 09:24:08 作者：前端小怪兽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函数中。

总结

以上为个人经验，希望能给大家一个参考，也希望大家多多支持脚本之家。