web-dev-qa-db-fra.com

Ne plus recevoir les événements du composant enfant détruit

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

Lorsque le composant enfant est ajouté dans le montage, 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 supprimant du tableau des composants enfants, il se déclenche même et le code à l'intérieur est exécuté.

Comment puis-je empêcher que cela se produise? J'ai essayé

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

mais cela a également désactivé cet événement pour tous les autres composants enfants, de sorte que ceux qui étaient encore actifs ne feraient plus de logique, car 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 ne tournerait pas l'événement pour tous les composants enfants.

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

vue.jsvuejs2vue-component
15
niko craft

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

Au lieu de cela, vous souhaitez supprimer l'événement uniquement pour le composant qui écoute. votre composant devrait ressembler à 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 supprimera uniquement l'écouteur spécifique pour le composant actuel.

35
Bert

J'imagine que vous rendez les composants avec une sorte de boucle qui leur donne une sorte d'index. Juste au-dessus de ma tête, ce que vous pourriez faire est de pousser l'index vers un tableau, puis dans votre fonction eventBus. $ On, vous testeriez pour voir 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 d'écorcher un chat. Je suis sûr qu'il existe également d'autres façons de procéder.

1
Miguel Coder