Vue.js 中的事件处理

Question

I have a situation where in an event is fired from parent component is being listen to by several child components.

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

when both these tabs are opened, everything works fine. What I'm struggling with is, destroying event listeners on Tab1 and still be able to listen on Tab 2. ( when the tab1 is closed). Right now if the listeners of Tab1 are destroyed, it disables listeners on Tab 2 as well.

Thanks in advance.

Answer 1

The event must removed from component which was listening not both, You need to use $off , to just removed selected event, not all events from the specific component only, not to both

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