如何在 Vue JS 中添加 window.addEventListener 和删除 window.removeEventListener答案

【问题标题】：How to add window.addEventListener and remove window.removeEventListener in Vue JS如何在 Vue JS 中添加 window.addEventListener 和删除 window.removeEventListener
【发布时间】：2021-05-28 17:54:00
【问题描述】：

我想在 vue js 文件中添加 window.addEventListener。

 window.addEventListener('message', (event) => {
  console.log(event, ' i am here');
 });

我已经在mounted()函数中添加了这个。

现在，我需要在销毁的方法中删除它，但不知何故我无法做到。

window.removeEventListener('message', (event) => {
  console.log(event, ' i am here');
});

【问题讨论】：

这能回答你的问题吗？ Add Vue.js event on window

标签： javascript vue.js

【解决方案1】：

好的，所以我创建了一个小提琴，它将向您展示如何删除和添加消息处理程序以及如何在此处发布消息：

new Vue({
  el: "#app",
  methods: {
    addHandler: function() {
        window.addEventListener('message', this.eventListenerExample);
    },
    removeHandler: function(){
        window.removeEventListener('message', this.eventListenerExample);
    },
    postMessage: function() {
        window.postMessage("This is a message ");
        },
    eventListenerExample: function(event){
        console.log(event, ' i am here');
    }
  },
  mounted: function () {
    this.addHandler();
    },
  destroyed: function() {
    this.remveHanlder();
  }
})

https://jsfiddle.net/ob1pLd7z/8/

这里请注意，该函数是此 vue 实例的一部分，并且该函数本身被添加和删除，而不是像您最初显示的那样使用内联函数。

【讨论】：

【解决方案2】：

我很高兴得知您想在组件销毁后清除/删除侦听器

  mounted() {
    const listener = () => {}
    const event = 'message'
    window.addEventListener(event, listener)
    this.$once('hook:destroyed', () => {
      window.removeListener(event, listener)
    })
  }

【讨论】：