Vue.js删除没有功能的事件监听器

Question

我向我的文档中添加了一个事件监听器，如下所示：

deleteTask(event){
     // myFunc
}

created() {
     document.addEventListener("keypress", this.deleteTask);
},

这发生在我的 Home.vue 组件中。 现在，我想在我的 Card.vue 组件中删除此事件侦听器。 像这样：

document.removeEventListener("keypress", this.deleteTask);

这显然不起作用，因为 this.deleteTask 在Card.vue组件中未知。但是我需要deleteTask函数来保留在Home.vue中，因为它在那里的某些数组上运行。所以我的问题是： 最好的方法是什么？

Answer 1

不要使其全局化，而应使其仅在您的组件中侦听：

<template>
  <div @keypress="deleteTask">
    ...
  </div>
</template>

Answer 2

您可以创建一个EventBus。

使用以下命令创建一个新的js文件：

import Vue from 'vue';
export const EventBus = new Vue();

现在，您可以在 Home.vue 中收听事件：

created() {
   ...
   EventBus.$on('removeListener', () => { document.removeEventListener("keypress", this.deleteTask); })
}

然后将使用removeListener

在 Card.vue 中调用事件EventBus.$emit('removeListener')