Vue3.x verwendet mitt.js für die Komponentenkommunikation

Vue2.x verwendet EventBus für die Komponentenkommunikation, während Vue3.x die Verwendung von mitt.js empfiehlt.

Inwiefern ist mitt.js auf einer Vue-Instanz besser als EventBus? Erstens ist es klein genug, nur 200 Bytes. Zweitens unterstützt es die Überwachung und Stapelentfernung aller Ereignisse. Es ist nicht auf Vue-Instanzen angewiesen und kann daher Framework-übergreifend verwendet werden. React oder Vue und sogar jQuery-Projekte können dieselbe Bibliothek verwenden.

Schnellstart

npm install --save mitt

Methode 1, globaler Bus, globale Eigenschaften in der Vue-Eintragdatei main.js mounten.

importiere { createApp } aus „vue“;
App aus „./App.vue“ importieren;
Fausthandschuh aus "Fausthandschuh" importieren

const app = createApp(App)
app.config.globalProperties.$mybus = mitt()

Methode 2: Kapseln Sie die benutzerdefinierte Transaktionsbusdatei mybus.js, erstellen Sie eine neue JS-Datei und importieren Sie sie überall dort, wo Sie sie verwenden möchten.

Fausthandschuh aus 'Fausthandschuh' importieren
exportiere Standardhandschuh()

Methode 3: Direkt in der Komponente importieren und verwenden. Es wird empfohlen, diese Methode zu verwenden, da der dezentrale Ansatz die Verwaltung und Fehlerbehebung erleichtert.

<Vorlage>
  <img alt="Vue-Logo" src="./assets/logo.png" />
  <HalloWelt msg="Hallo Vue 3.0 + Vite" />
</Vorlage>

<Skript>
Fausthandschuh aus 'Fausthandschuh' importieren
importiere HelloWorld aus './components/HelloWorld.vue'

Standard exportieren {
  Komponenten:
    Hallo Welt
  },
  Setup (Requisiten) {
    const formItemMitt = mitt()
    zurückkehren {
      formItemMitt
    }
  }
}
</Skript>

Anwendung

Tatsächlich ist die Verwendung von mitt ähnlich wie bei EventEmitter. Ereignisse werden durch die Methode on hinzugefügt, durch die Methode off entfernt und durch die Methode clear gelöscht.

Fausthandschuh aus 'Fausthandschuh' importieren

const emitter = mitt()

// einem Ereignis zuhören
emitter.on('foo', e => console.log('foo', e) )

// alle Ereignisse abhören
emitter.on('*', (Typ, e) => console.log(Typ, e) )

// ein Ereignis auslösen
emitter.emit('foo', { a: 'b' })

// alle Ereignisse löschen
emitter.alles.löschen()

// Arbeiten mit Handlerreferenzen:
Funktion onFoo() {}
emitter.on('foo', onFoo) // hören
emitter.off('foo', onFoo) // abhören

Es ist zu beachten, dass wir mitt in Form eines Funktionsaufrufs importiert haben, nicht neu. Wenn Sie ein Ereignis entfernen, müssen Sie den Namen und die Referenz der Funktion übergeben, die das Ereignis definiert.

Grundprinzipien

Das Prinzip ist sehr einfach: Die Funktion wird über die Map-Methode gespeichert. Nach meiner Löschung besteht der Code aus weniger als 30 Zeilen.

exportiere Standardfunktion mitt(alle) {
 alle = alle || neue Map();

 zurückkehren {
  alle,

  auf(Typ, Handler) {
   const handlers = all.get(Typ);
   const hinzugefügt = Handler und Handler.push(Handler);
   wenn (!hinzugefügt) {
    alle.set(Typ, [Handler]);
   }
  },

  aus(Typ, Handler) {
   const handlers = all.get(Typ);
   wenn (Handler) {
    handlers.splice(handlers.indexOf(handler) >>> 0, 1);
   }
  },

  emittieren(Typ, evt) {
   ((all.get(Typ) || [])).slice().map((Handler) => { Handler(evt); });
   ((all.get('*') || [])).slice().map((handler) => { handler(Typ, evt); });
  }
 };
}

Vue3 hat die Methoden $on, $off und $once vollständig aus der Instanz entfernt. $emit ist weiterhin Teil der vorhandenen API, da es zum Auslösen von Ereignissen verwendet wird, die deklarativ von einer übergeordneten Komponente angehängt werden.

Dies ist das Ende dieses Artikels über die Verwendung von mitt.js für die Komponentenkommunikation in Vue3.x. Weitere relevante Inhalte zur Komponentenkommunikation in Vue3.x mitt.js finden Sie in den vorherigen Artikeln von 123WORDPRESS.COM oder in den folgenden verwandten Artikeln. Ich hoffe, dass jeder 123WORDPRESS.COM in Zukunft unterstützen wird!