Stop receiving events from destroyed child compone

问题:

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?

回答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.

回答2:

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.

回答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);
  });
}