javascript - 如何在 Vue JS 中添加 window.addEventListener 和删除 window.removeEventListener

Question

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

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

我已经在 mount() 函数中添加了这个。
现在，我需要在销毁的方法中删除它，但不知何故我无法做到。

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

Answer 1

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

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 实例的一部分，并且该函数本身被添加和删除，而不是像您最初展示的那样使用内联函数。