eventBus de la méthode de communication du composant vue

Les problèmes les plus courants que nous rencontrons dans les projets vue sont la communication entre les composants, la communication parent-enfant, la communication frère et la communication entre les composants.

Communication parent-enfant, généralement le composant parent transmet des valeurs au composant enfant via des accessoires, le composant enfant transmet des paramètres au composant parent en utilisant $emit, et il existe des méthodes telles que $parent, $children, $refs, etc. .pour obtenir directement des composants. La communication entre composants frères ou composants sans contact direct sera plus gênante Les outils de gestion d'état les plus couramment utilisés tels que vuex.

        À ce stade, nous avons encore une méthode simple qui est le bus d'événements de vue (eventBus), en créant une instance de vue vide en tant que bus d'événements global, en l'utilisant pour déclencher des événements et écouter des événements, afin d'établir une communication entre tous les composants , y compris parents et enfants , intergénérationnels, frères et sœurs.

1. Comment utiliser :

1. Créez une instance de vue vide dans main.js en tant que bus d'événements global et, en même temps, liez-la au prototype de vue.

//main.js
Vue.prototype.$eventBus = new Vue()

2. Les sous-composants ou les composants frères déclenchent des événements via $emit.

sendFunc(){
    this.$eventBus.$emit( 'changeFunc' ,  123, 'abc' )
}

3. Le composant parent ou le composant frère écoute les événements via $on.

created(){
    //绑定前需先解绑，避免反复触发、内存泄漏的问题
    this.$eventBus.$off( 'changeFunc' );  
    this.$eventBus.$on( 'changeFunc' , (val1, val2)=>{
        this.msg = val1;
        this.msg2 = val2;
    } )
}

Remarque : Avant la liaison, assurez-vous de d'abord dissocier pour éviter des problèmes tels que des déclenchements répétés et des fuites de mémoire.

Conseils : S'il y a trop d'événements liés, il est préférable de noter tous les noms d'événements liés sur le bus pour faciliter la maintenance. En fait, s'il y a autant de fixations, mieux vaut ne pas l'utiliser, mieux vaut être honnête et pratique avec vuex.

2. Délier $off avant de lier

Avant que le composant n'écoute les événements dans eventBus, vous devez d'abord vous rappeler de le dissocier.

created(){
    //this.$eventBus.$off( 'changeFunc' );  
    this.$eventBus.$on( 'changeFunc' , (val)=>{
        this.msg = val;
    } )
}

Comme ci-dessus, si vous ne déliez pas avant de lier, il y a deux problèmes principaux : 1. Les événements sont déclenchés à plusieurs reprises 2. Les fuites de mémoire ;

Question 1. L'événement est déclenché à plusieurs reprises

        Si nous détruisons le composant puis le rechargeons, combien de fois nous inscrivons-nous à l'événement lié à created ? La réponse est double, c'est-à-dire que lorsque nous déclenchons cet événement, il sera exécuté deux fois.

Analyse des causes :

        Étant donné que eventBus est créé dans l'instance de vue dans main.js, que le composant soit détruit ou non, il n'y a aucun changement pour le bus d'événements. Lorsque le composant est recréé, la liaison dans created est exécutée à nouveau, et elle n'a pas été détruite la dernière fois, elle sera donc exécutée deux fois, et ainsi de suite, il y en aura de plus en plus.

Question 2. Fuite de mémoire (fermeture)

created(){
    //this.$eventBus.$off( 'changeFunc' );  
    this.$eventBus.$on( 'changeFunc' , (val)=>{
        this.msg = val;   //此处是一个闭包
    } )
}

Lorsque $on écoute l'événement, une variable msg extérieure à la fonction est introduite dans la fonction de rappel pour générer une fermeture.

Lorsque nous détruisons le composant, si l'abonnement n'est pas désabonné, le msg ne sera pas réinitialisé et une fuite de mémoire se produira.

4. Syntaxe $off

$off()                //取消所有的事件订阅；
$off('事件名')         //取消指定事件名的；
$off('事件名', 回调)   //取消指定事件名的指定回调