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         


        

Answer 1

I would imagine that you are rendering the components with some kind of loop that gives them some sort of index. Just off the top of my head, what you could do is push the index to an array and then in your eventBus.$on function you would test to see if the index of that component exists in the array(on the parent component) and fire the logic if it doesn't.

EventBus.$emit('content-type-saving', index);

EventBus.$on('content-type-saving', function(index) {
    if(this.deletedComponentArray.indexOf(index) == -1){
        //execute logic
    }
}

that's just one way to skin a cat. I'm sure there are other ways of doing it as well.

Answer 2

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.

Answer 3

another solution without creating component method

mounted(){
  const listener = () => {
    // heavy logic
  };

  EventBus.$on('content-type-saving', listener);

  this.$once("hook:beforeDestroy", () => {
     EventBus.$off('content-type-saving', listener);
  });
}