vue.js - Stop receiving events from destroyed child component

Question

I have a parent where I can dynamically add child components into.

When child component is added in mount I register a listener for an event

EventBus.$on('content-type-saving', function() {
    logic here...
}

Problem is when that component is deleted in the parent by removing it from the array of child components, that even still fires and code inside of it is run.

How can I prevent this from happening? I tried this

    beforeDestroy() {
      //do something before destroying vue instance
        EventBus.$off('content-type-saving')
    }

but that turned off that event for all other child components as well so those that were still live would not do logic stuff anymore because I turned off event in destroyed child component.

I thought if I turned off an event it would only affect listening for that event for that child component and not turn the event for all child components.

How can I stop destroyed components from reacting on events?

question from:https://stackoverflow.com/questions/45399302/stop-receiving-events-from-destroyed-child-component

Answer 1

When you call $off with just the name of the event, all listeners are removed for the event specified.

Instead, you want to remove the event only for the component that is listening. your component should look something like this:

const component = {
  methods:{
    listener(){
      //do something on event
    }
  },
  created(){
    EventBus.$on('content-type-saving', this.listener)
  },
  beforeDestroy(){
    EventBus.$off('content-type-saving', this.listener)
  }
}

This will remove only the specific listener for the current component.