eventBus -- mitt Verwendung in Vue3.x

Dieser Artikel beschreibt hauptsächlich die Installation, Verpackung, Verwendung und Kernprinzipien von eventBus-mitt in Vue3.

$onIn $offVue3.x werden die selbstdefinierten ereignisbezogenen Methoden von , , usw. entfernt. Daher wird in vue3 empfohlen, dass wir den mitt Event Bus verwenden, um Daten zu übertragen. Tatsächlich ist die Verwendung von mitt der das gleiche wie bei den ursprünglichen benutzerdefinierten Ereignissen von vue .

Fausthandschuh

Mitt ist eine kleine JavaScript-Bibliothek eines Drittanbieters zum Veröffentlichen/Abonnieren von Nachrichten, die sowohl von React als auch von Vue verwendet werden kann.

Installieren Sie die Mitt-Bibliothek

Führen Sie das Terminal im Stammverzeichnis des Projekts aus:

    npm install --save mitt

im Bauteil verwendet

Nach der Installation von mitt können Sie mitt direkt importieren und instanziieren, um mitt zu verwenden;

    import mitt from 'mitt'
    
    const emitter = mitt()

    emitter.on('foo', e => console.log(e) )  //emitter
   
    emitter.emit('foo', 'emitter')

Paket mitt

Erstellen Sie im utils-Verzeichnis eine neue mitt.js-Datei und schreiben Sie den folgenden Code zum Packen;

    import mitt from 'mitt'

    const emitter =new mitt()

    export default emitter

Bringen Sie einfach den Emitter direkt in Gebrauch;

    import emitter from '../api/mitt'

    emitter.on('foo', e => console.log(e) )  //emitter

    emitter.emit('foo', 'emitter')

Mitt-Nutzung

Sie können mitt direkt verwenden, indem Sie das Paket mitt einführen, aber Sie müssen aufpassen: Es ist am besten, Ereignisse im Hook zu registrieren onMounted, und die registrierten Ereignisse müssen onUnmountedim Hook entfernt werden.

    // 引入 mitt
    import emitter from '../api/mitt'

    // 注册
    emitter.on('eventName', function(e) {
        console.log(e)
    })

    // 调用
    emitter.emit('eventName', 'emitter')

    // 移除
    emitter.off('eventName')

Konsolenausgabe: Emitter

ps: Die beiden Komponenten zum Registrieren von Ereignissen und zum Aufrufen von Ereignissen müssen keine Eltern-Kind-Komponenten sein, Geschwisterkomponenten und andere Komponenten sind in Ordnung.

Mitt-Core-Prinzip

Das Kernprinzip von mitt ist es, Funktionen durch die Map-Methode zu speichern.

export default function mitt(all) {
    all = all || new Map();
    return {
        all,
        // 注册
        on(type, handler) {
            const handlers = all.get(type);
            const added = handlers && handlers.push(handler);
            if (!added) {
                all.set(type, [handler]);
            }
        },
        //调用
        emit(type, evt) {
            ((all.get(type) || [])).slice().map((handler) => { handler(evt); });
            ((all.get('*') || [])).slice().map((handler) => { handler(type, evt); });
        },
        //移除
        off(type, handler) {
            const handlers = all.get(type);
            if (handlers) {
                handlers.splice(handlers.indexOf(handler) >>> 0, 1);
            }
        },
    };
}

Dies ist das Ende dieses Artikels

Wenn Sie weitere Ideen haben, können Sie diese gerne im Kommentarbereich mitteilen!