Vue.js 中的事件处理

Question

我遇到这样一种情况，从父组件触发的事件正在被多个子组件监听。

e.g.
Parent Component: emit -> "orderReceived"
Child Component1( Tab1): on-> "orderReceived" -> fetch array1 from server
Child Component2( Tab2): on-> "orderReceived" -> fetch array2 from server

打开这两个选项卡后，一切正常。 我正在努力解决的问题是，销毁 Tab1 上的事件监听器并且仍然能够在 Tab 2 上监听。（当 tab1 关闭时）。 现在，如果 Tab1 的监听器被销毁，它也会禁用 Tab 2 上的监听器。

提前致谢。

Answer 1

事件必须从正在侦听的组件中移除，而不是同时移除，您需要使用 $off 来移除选定的事件，而不是只移除来自特定组件的所有事件，而不是两者

const ChildComponent1 = {
  methods:{
    orderReceived(){
      //orderReceived event emit
    }
  },
  created(){
    EventBus.$on('YOURCONTENT', this.orderReceived)
  },
  beforeDestroy(){
    EventBus.$off('YOURCONTENT', this.orderReceived)
  }
}