Question

我在查看页面上有一个引导Vue模态。单击保存时，保存功能将发出一个事件。工作良好。当我关闭模态并再次打开它，然后单击保存时，保存函数将按预期方式处理，发出函数，但是，它会发出两次（每次打开和关闭模态时一次。如果我打开和关闭模态5次然后单击保存，它调用一次save函数，但是发出5次函数，我不确定当使用Typescript，vue或bootstrap（除了jQuery以外的任何方式）关闭模式时，如何取消绑定事件谁能建议？

save() {
  EventBus.$emit(MyEvents.RequestItemDetails);
} 

// EventBus.ts
export const EventBus = new Vue();
export enum MyEvents{
RequestItemDetails = "request-item-details"
}

Answer 1

您只提供了很少的代码来让我们知道问题的实质，但我会猜测一下。

如果您正在使用全局事件总线，并且从组件内部订阅了该总线上的事件，则需要确保在销毁组件时取消订阅该事件，否则将调用事件处理程序函数多次，因为它在总线上多次注册。

例如：

import bus from './bus.js'

export default {
  created() {
    bus.$on('request-item-details', this.onRequestItemDetails)
  },

  destroyed() {
    bus.$off('request-item-details', this.onRequestItemDetails)
  },

  methods: {
    onRequestItemDetails() {
      // Handle event
    }
  }
}

Answer 2

您的回复帮助我找到了解决方案。在我的关闭方法中，我所需要做的就是添加“ EventBus。$ off（'request-item-details'）”。这样就好了。再次犯过多罪。谢谢！

关闭bootstrap vue模态不会解除绑定事件

2 个答案: