vue 2 verwendet Bus.js, um die Kommunikation von Nicht-Eltern-Kind-Komponenten zu implementieren

In diesem Artikel erfahren Sie mehr über die Methode zur Verwendung von Bus.js zur Implementierung der Kommunikation von Nicht-Eltern-Kind-Komponenten in Vue 2. Bedürftige Freunde können sich darauf beziehen

$dispatch und $broadcast Broadcast und Broadcast wird in vue2-Methoden zum Versenden von Ereignissen aufgegeben. Props und $emit() können in Eltern-Kind-Komponenten verwendet werden. Die Kommunikation zwischen nicht-übergeordneten und untergeordneten Komponenten kann durch Instanziieren eines Busses als Medium unter den Geschwisterkomponenten erreicht werden, die miteinander kommunizieren möchten, und dann durch Aufrufen des Bus-Ereignisses die Kommunikation und Parameterübertragung implementieren Auslösen bzw. Überwachen.
Bus.js kann so aussehen

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

Fügen Sie Bus.js in die Komponenten ein, die kommunizieren müssen

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

Fügen Sie eine Schaltfläche hinzu und geben Sie ein Ereignis aus, nachdem Sie darauf geklickt haben

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

Methoden

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

Eine andere Komponente importiert auch Bus.js und lauscht auf das on-Ereignis in der Hook-Funktion

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

Verwandte Empfehlungen:

vue 2.0 und elementUI implementieren den Methodencode der Breadcrumb-Navigationsleiste

Vue 2.5 Level E neue Funktionen und Funktionsfreigabe

TypeScript-bezogene Verbesserungen in Vue 2.5

Das obige ist der detaillierte Inhalt vonvue 2 verwendet Bus.js, um die Kommunikation von Nicht-Eltern-Kind-Komponenten zu implementieren. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!