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

我想在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');
});

---

我很高兴看到您希望在组件销毁后清除/删除侦听器

mounted（）{
常量侦听器=（）=>{}
常量事件='消息'
addEventListener（事件，侦听器）
这个.$once（'hook:destromed'，（）=>{
RemovelListener（事件，侦听器）
})
}

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

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();
  }
})

---

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

这是否回答了您的问题？