Detaillierte Erklärung zur Verwendung von Bussen in Vue

Vue-Busmechanismus (Bus)

Zusätzlich zur Verwendung von Vuex kann die Kommunikation zwischen nicht über- und untergeordneten Komponenten in Vue auch über den Bus erfolgen, und beide sind auf unterschiedliche Szenarien anwendbar.

Der Bus eignet sich für kleine Projekte und Projekte, bei denen Daten von weniger Komponenten verwendet werden. Er ist nicht für mittlere und große Projekte geeignet, bei denen Daten von vielen Komponenten verwendet werden. Bus ist eigentlich ein Publish-Subscribe-Modell. Es verwendet den benutzerdefinierten Ereignismechanismus von Vue, um ein Ereignis über $emit am auslösenden Ort zu veröffentlichen, und hört das Ereignis über $on auf der Seite ab, die abgehört werden muss.

Vuex eignet sich für mittlere und große Projekte und Situationen, in denen Daten zwischen mehreren Komponenten geteilt werden.

Verwendung des Komponentenkommunikationsbusses

Erstellen Sie bus.js unter der Utils-Datei

// Dienstprogramme – bus.js
Vue von „vue“ importieren
const bus = neuer Vue()
Standardbus exportieren

1. Werte übergeben

Nachricht senden

Bus aus '@/utils/bus' importieren

Der erste Parameter ist die Flagvariable und der zweite Parameter ist der Kommunikationswert.

uns.$emit('Nachricht', 'Hallo');

Empfangen von Informationen

Bus aus '@/utils/bus' importieren

Der erste Parameter ist die Flagvariable und das e im zweiten Parameter ist der Kommunikationswert.

bus.$on('Nachricht', (e) => {
 console.log(e)
})

2. Aufrufmethode

Eine Komponente (A) ruft eine Methode einer anderen Komponente (B) auf.

Methoden der Komponente B

Bus aus '@/utils/bus' importieren
montiert () { 
 bus.$on('testA', dieser.testA) 
},
testA () {
 console.log('Aufgerufen von Komponente A')
}

Ein Komponentenaufruf

Bus aus '@/utils/bus' importieren
montiert () {
 bus.$emit('testA')
}

Dies ist das Ende dieses Artikels über die Verwendung von Bussen in Vue. Weitere relevante Inhalte zur Verwendung von Vue-Bus finden Sie in früheren Artikeln auf 123WORDPRESS.COM oder in den folgenden verwandten Artikeln. Ich hoffe, dass jeder 123WORDPRESS.COM in Zukunft unterstützen wird!