Entwurfsprozess des Ereignissystems der Vue.js-Komponentenbibliothek (Code)

In diesem Artikel geht es um den Designprozess (Code) des Vue.js-Komponentenbibliotheks-Ereignissystems. Ich hoffe, dass er für Sie hilfreich ist.

Nehmen wir die Eingabenummer als Beispiel:

@ ist die Abkürzung für v-on-Anweisung, die zum Binden von Ereignis-Listenern verwendet wird:

<InputNumber @on-change="change" :max="10" :min="1" v-model="value1">
</InputNumber>

Wenn wir Komponenten verwenden, An Das Ereignis von 自定义 wird registriert:

methods: {
    change (v) {
        console.log(v)
    }
}

Die Möglichkeit, es innerhalb der Komponente auszulösen, ist ebenfalls sehr einfach:

ruft $emit auf, um das Ereignis in der aktuellen Instanz auszulösen, und der Ereignisname lautet on-change

this.$emit('on-change', val);

Hier kommt die Idee: Wenn die InputNumber äußere Schicht in einer bestimmten FormItem Komponente verschachtelt ist, sind die gegenseitigen Aufrufe zwischen Ereignissen ähnlich, aber es gibt eine zusätzliche Annahme:

verschachtelte Beziehung, Vielleicht gibt es ein mehrstufiges Eltern-Kind-

wie element und iview. Es wurde ein weiteres mixins entworfen, das eine Methode bereitstellt: dispatch

Es akzeptiert 3-Parameter :

• componentName Komponentenname

• eventName Benutzerdefinierter Ereignisname

• params Vom Ereignis übergebene Parameter

dispatch(componentName, eventName, params) {
}

Ähnlich wie input-number werden beispielsweise viele in dieses Formular eingebettete Komponenten so gestaltet, dass sie mit FormItem interagieren:

this.dispatch('FormItem', 'on-form-change', val);

Wenn wir das Komponente, aufgepasst:FormItem

export default {
    name: 'FormItem'
}

Dann registrieren Sie auf die gleiche Weise ein benutzerdefiniertes Ereignis:

<Form-item @on-form-change="test">
</Form-item>

Werfen wir einen Blick auf das Innere der Versandfunktion:

Die Die Idee besteht darin, Schicht für Schicht nach oben zu gehen und das übergeordnete Element zu finden:

• $parent – ​​übergeordnete Instanz

• $root – das Stamm-Vue Instanz des Komponentenbaums

var parent = this.$parent || this.$root;

Rufen Sie den Namen der übergeordneten Komponente ab:

var name = parent.$options.name;

Schleifenbeurteilung starten:

while (parent && (!name || name !== componentName)) {
    // ...
}

Zum Beispiel das obige

ruft intern Dispatch auf und übergibt die Parameter, was bedeutet, dass es weiter sucht. Das übergeordnete Element input-number ist das nameFormItem von

innerhalb von while:

. Suchen Sie dann das übergeordnete Beispiel, und dann den Namen abrufen

parent = parent.$parent;
if (parent) {
    name = parent.$options.name;
}

Wenn schließlich gefunden wird:

ist dasselbe wie das anfängliche Auslösen des benutzerdefinierten Ereignisses: $emit

if (parent) {
    parent.$emit.apply(parent, [eventName].concat(params));
}

Verwandte Empfehlungen:

Vue.js-Komponentenkommunikation von der untergeordneten Komponente zur übergeordneten Komponente (Code)

So verwenden Sie die mobile Komponentenbibliothek von Vue.js

Das obige ist der detaillierte Inhalt vonEntwurfsprozess des Ereignissystems der Vue.js-Komponentenbibliothek (Code). Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!