Arrêter de recevoir les événements du composant enfant détruit

Question

J'ai un parent dans lequel je peux ajouter dynamiquement des composants enfants.

Lorsque le composant enfant est ajouté dans le support, j'enregistre un écouteur pour un événement.

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

Le problème est que, lorsque ce composant est supprimé dans le parent en le retirant du tableau des composants enfants, ce même composant se déclenche toujours et le code qu'il contient est exécuté.

Comment puis-je éviter que cela ne se produise ? J'ai essayé ceci

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

mais cela a désactivé l'événement pour tous les autres composants enfants également, de sorte que ceux qui étaient encore actifs ne feraient plus rien de logique parce que j'ai désactivé l'événement dans le composant enfant détruit.

Je pensais que si je désactivais un événement, cela n'affecterait que l'écoute de cet événement pour ce composant enfant et non l'événement pour tous les composants enfants.

Comment empêcher les composants détruits de réagir aux événements ?

Answer 1

Lorsque vous appelez $off avec juste le nom de l'événement, tous les auditeurs sont supprimés pour l'événement spécifié.

Au lieu de cela, vous voulez supprimer l'événement uniquement pour le composant qui est à l'écoute. Votre composant devrait ressembler à quelque chose comme ceci :

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

Cela ne supprimera que l'écouteur spécifique du composant actuel.

Answer 2

J'imagine que vous rendez les composants avec une sorte de boucle qui leur donne une sorte d'index. Ce que vous pourriez faire, c'est pousser l'index dans un tableau et ensuite, dans votre fonction eventBus.$on, tester si l'index de ce composant existe dans le tableau (sur le composant parent) et déclencher la logique si ce n'est pas le cas.

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

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

c'est juste une façon de dépecer un chat. Je suis sûr qu'il y a d'autres façons de le faire aussi.