关闭引导 vue 模式不会解除绑定事件答案

【问题标题】：Closing bootstrap vue modal doesn't unbind event关闭引导 vue 模式不会解除绑定事件
【发布时间】：2019-06-27 03:54:56
【问题描述】：

我在视图页面上有一个引导 vue 模式。单击保存时，保存函数会发出一个事件。工作正常。当我关闭模式并再次打开它然后单击保存时，保存功能按预期处理，发出该功能，但是，它发出两次（每次打开和关闭模式一次。如果我打开和关闭模式5次然后单击保存,它调用保存函数一次但发出函数5次.我不确定当模式关闭时我如何解除绑定事件使用打字稿、vue或引导程序(jQuery以外的任何方式:) . 谁能给点建议？

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

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

【问题讨论】：

标签： vue.js

【解决方案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
    }
  }
}

【讨论】：

【解决方案2】：

您的回复帮助我找到了解决方案。在我的关闭方法中，我需要做的就是添加“EventBus.$off('request-item-details')”。那照顾了它。再次犯下过度思考的罪行。谢谢！

【讨论】：