如何防止来自 Vue Js 组件中的事件侦听器的多次调用?

凯撒

我正在像这样在事件侦听器上调用特定函数。

mounted() {
    window.addEventListener("message", this.call);   },

methods: {
    call(e){
       if (e.data === "test"){
          this.call2()
       }
    }
    call2(){
       console.log("called call2")
    }
}

在第一次尝试时,call2被调用一次。但是在第二次尝试时,会call2被调用两次,并且会在控制台上显示两次“被调用的 call2”。等等。对于每次尝试,它只会增加call2单个操作中调用的次数有什么办法可以防止这种情况吗?

扎克祖恩

始终删除beforeDestroy生命周期挂钩中的事件侦听器以防止泄漏侦听器。

//Add the event listener
mounted() {
    window.addEventListener("message", this.call);   
},

//Remove the event listener
beforeDestroy() {
    window.removeEventListener("message", this.call);   
},

查看 Vue 生命周期以供参考:

在此处输入图片说明

本文收集自互联网,转载请注明来源。

如有侵权,请联系 [email protected] 删除。

编辑于
0

我来说两句

0 条评论
登录 后参与评论

相关文章

如何从 vanilla JS 事件侦听器修改 Vue 数据?

是否可以从Vue.js 2中的组件访问事件侦听器

如何在 Vue 组件中的每个列表项上附加事件侦听器?

如何正确删除 vue 3 中的事件侦听器

Vue.js在实例内部添加事件侦听器?

如何在动态字符串的反应js中事件侦听器或单击侦听器?

来自 js 静态文件的事件侦听器指向 Django 中的错误路径

如何在node.js事件侦听器中获取事件名称?

如何从引导选择侦听器调用 vue 方法?

如何在 Scala.js 中的单击事件侦听器中检索标签名称?

如何在Ext JS的日历组件中添加侦听器?

如何/何时将事件侦听器附加到d3.js中?

如何将事件侦听器添加到tone.js中播放的音符

如何在d3.js中自定义事件侦听器?

如何使用Vanilla JS在事件侦听器中禁用preventDefault

如何获取表单提交事件侦听器以在JS中工作?

如何减慢节点 JS 事件侦听器的速度?

如何将事件侦听器添加到ag网格的单元格内的元素(使用js或jquery,不是Angular,不是reactjs,不是vue)

如何防止/停止Vue.js中的点击传播

与浏览器 Javascript 的事件侦听器相比,事件包如何在 node.js 中工作

来自main.js的全局组件的Vue js调用方法

React.js和Redux-如何防止来自实时搜索组件的过多API调用?

如何在Jquery中多次调用函数以添加事件侦听器,而不仅仅是侦听最后一个?

在脚本标签vue2中侦听来自js代码的自定义事件

在Vue js中更改参数化的子组件时如何防止父组件重新加载

如何从vue js中的组件渲染组件

如何防止或阻止父组件在vue.js中重新渲染

在Node.js的事件库中向异步侦听器发出信号时,如何修复null参数?

bone.js:防止在模型更改时触发侦听器事件