Vue.js: EventBus 被多次调用
Vue.js: EventBus being called multiple times
我正在构建 '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)?谢谢!
我也遇到了同样的问题,经过一番研究,我得到了这个解决方案。
您在应用程序中定义了组件 (CategoryA.vue) 两次,导致函数 运行 两次,在本例中为 CategoryA.vue
解决方法:
你必须在 created() 之后调用 destroyed()
喜欢,
created() {
EventBus.$on('confirm-delete-category-a', (id) => {
this.confirmDelete(id);
}),
destroyed() {
EventBus.$off('confirm-delete-category-a');
},
我正在构建 '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)?谢谢!
我也遇到了同样的问题,经过一番研究,我得到了这个解决方案。
您在应用程序中定义了组件 (CategoryA.vue) 两次,导致函数 运行 两次,在本例中为 CategoryA.vue
解决方法: 你必须在 created() 之后调用 destroyed() 喜欢,
created() {
EventBus.$on('confirm-delete-category-a', (id) => {
this.confirmDelete(id);
}),
destroyed() {
EventBus.$off('confirm-delete-category-a');
},