vue 2 utilise Bus.js pour implémenter la communication entre composants non parent-enfant

Cet article partagera avec vous la méthode d'utilisation de Bus.js pour implémenter la communication entre composants non parent-enfant dans vue 2. Les amis dans le besoin peuvent s'y référer

$dispatch et $broadcast sont abandonnés dans vue2. Méthodes de répartition des événements. Les accessoires et $emit() peuvent être utilisés dans les composants parent-enfant. Comment implémenter la communication entre les composants non parents et enfants peut être réalisé en instanciant une instance de Vue Bus en tant que support Parmi les composants frères qui souhaitent communiquer entre eux, Bus est introduit, puis la communication et le transfert de paramètres sont réalisés par appel. Déclenchement et surveillance des événements de bus respectivement.
Bus.js peut être comme ça

import Vue from 'vue'
export default new Vue()

Introduire Bus.js dans les composants qui doivent communiquer

import Bus from '../common/js/bus.js'

Ajouter un bouton et $émettre un événement après avoir cliqué dessus

<button @click="toBus">子组件传给兄弟组件</button>

méthodes

methods: {
    toBus () {
        Bus.$emit('on', '来自兄弟组件')
    }
  }

Un autre composant importe également Bus.js et écoute l'événement on dans la fonction hook

import Bus from '../common/js/bus.js'
export default {
    data() {
      return {
        message: ''
      }
    },
    mounted() {
       Bus.$on('on', (msg) => {
         this.message = msg
       })
     }
   }

Recommandations associées :

vue 2.0 et elementUI implémentent le code de la méthode de la barre de navigation du fil d'Ariane

Nouvelles fonctionnalités et partage de fonctionnalités de Vue 2.5 niveau E

TypeScript lié aux améliorations de Vue 2.5

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!