Vue.js: EventBus 被多次调用

Question

我正在构建 'undo delete' - 动作的逻辑。为此，我使用事件总线将事件发送到两个不相关的组件，如下所示：

Undo.vue:

`EventBus.$emit(`confirm-delete-${this.category}`, this.item.id);`

事件的名称(this.category)是基于来自parent(ConfirmDeleteModal.vue)的道具，然后收到如下：

CategoryA.vue

created() { EventBus.$on('confirm-delete-category-a', (id) => { this.confirmDelete(id); });

和

CategoryB.vue

created() { EventBus.$on('confirm-delete-category-b', (id) => { this.confirmDelete(id); });

我的问题：出于某种原因，category-a 的事件被发出和接收两次（category-b 工作正常）。我必须不断地收听 confirm-event，因此我无法在收到事件后删除事件侦听器或仅收听 $once。任何想法如何解决这个问题（也许使用 Vuex）？谢谢！

Answer 1

我也遇到了同样的问题，经过一番研究，我得到了这个解决方案。

您在应用程序中定义了组件 (CategoryA.vue) 两次，导致函数运行两次，在本例中为 CategoryA.vue

解决方法：你必须在 created() 之后调用 destroyed() 喜欢，

created() {
    EventBus.$on('confirm-delete-category-a', (id) => {
      this.confirmDelete(id);
    }),
 destroyed() {
            EventBus.$off('confirm-delete-category-a');
        },

Vue.js: EventBus 被多次调用

Vue.js: EventBus being called multiple times

javascript

vue.js

vuex

vue-events