Ⅰ Was ist eventBus?
Laienhaft ausgedrückt möchten Sie in jeder Komponente die Nachricht (Parameter) -> an eine beliebige Komponente übergeben und eine bestimmte Logik ausführen.
Ⅱ Wie vue3 eventBus verwendet
- Es gibt keinen eventBus in vue3, also müssen wir es selbst schreiben, aber es ist sehr einfach.
Schritt 1 (eventBus-Container)
- Erstellen Sie im src-Verzeichnis einen bus-Ordner, um die von Ihnen geschriebene bus.js zu speichern;
- Schreiben Sie bus.js => binden Sie drei (Subscribe, Unsubscribe, Publish) Funktionen an den Klassenprototyp;
// bus.js
class Bus {
constructor() {
this.list = {
}; // 收集订阅
}
// 订阅
$on(name, fn) {
this.list[name] = this.list[name] || [];
this.list[name].push(fn);
}
// 发布
$emit(name, data) {
if (this.list[name]) {
this.list[name].forEach((fn) => {
fn(data); });
}
}
// 取消订阅
$off(name) {
if (this.list[name]) {
delete this.list[name];
}
}
}
export default new Bus;
- Subscriber (on), Funktion in die Liste setzen => auf Publisher warten (emit), Parameter an Aufruf übergeben;
- Da die Funktion ein Objekt ist, hat sich die Speicheradresse nicht geändert und wird immer noch in der Teilnehmer-(Ein)-Komponente ausgeführt.
Schritt 2 (Abonnenten)
- Abonnieren Sie in comA.vue;
- Abonnements speichern nur Funktionen und führen sie erst nach ihrer Veröffentlichung aus;
<template>
<div>
{
{ name }} --- {
{ age }}
</div>
</template>
<script>
import {
ref , onUnmounted} from 'vue';
import Bus from '../bus/bus.js';
export default {
setup() {
const name = '张三';
const age = ref(18)
Bus.$on('addAge',({
num })=>{
age.value = num; })
//组件卸载时，取消订阅
onUnmounted( () => {
Bus.$off('addAge') } )
}
}
</script>
- Löschen Sie beim Verlassen der Komponente (onUnmounted) das Array der registrierten und abonnierten Funktionen, um zu vermeiden, dass immer mehr gespeichert werden.
Schritt 3 (Publisher)
- In comB.vue veröffentlichen;
- Abonnement aufrufen und Parameter übergeben;
<template>
<button @click="fabu">发布</button>
</template>
<script>
import Bus from '../bus/bus.js';
export default {
setup() {
function fabu(){
Bus.$emit('addAge',{
age:'19'});
}
}
}
</script>
- Nach dem Veröffentlichen wird die Komponente des Abonnenten ausgeführt. Beachten Sie, dass der Name des entsprechenden Abonnements und der Veröffentlichung identisch sein sollte.