Detaillierte Erklärung des Synchronisierungsmodifikators von Vue

1. Anweisungen

Eine Anweisung ist eine Anweisung. Wörtlich bedeutet sie: Ich sage dir, was du tun sollst. Es ist, als würde man eine Anweisung senden, und die Person, die die Anweisung erhält, muss sie dann nur noch befolgen. Anweisungen in Vue haben ein einheitliches und leicht erkennbares Format, d. h. Anweisungen beginnen mit v- , wie beispielsweise:

<div v-text="x"> </div> //v-text gibt die Anweisung zum Text des Labels an<div v-on:click="add"> <div> //v-on-Anweisung zur Ereignisbindung

Aber nicht alle Anweisungen beginnen mit v-. Einige Abkürzungen sind auch Anweisungen, wie zum Beispiel

<img :src="x"> </img> //Abkürzung für v-bind:src <button @click="add"> </button> //Abkürzung für v-on:click

2. Modifikatoren

Der Modifikator ist ein syntaktischer Zucker, der eng mit der Ereignisbehandlungsanweisung v-on in der Anweisung verwandt ist. Der sogenannte syntaktische Zucker ist sehr süß, einfach und leicht zu verwenden. In der Programmierwelt bedeutet dies, dass alles, was für Sie getan werden kann, für Sie getan wird und nur die einfachsten Dinge für Sie übrig bleiben.

Bei Ereignishandlern gibt es einige sehr allgemeine Anforderungen, wie etwa event.preventDefault() zum Verhindern von Standardereignissen und event.stopPropagation() zum Verhindern von Ereignisbubbling usw. Daher kümmert sich Vue für uns um diese allgemeinen Anforderungen im Ereignisverarbeitungsprozess. Wenn wir es brauchen, sagen Sie es Vue einfach, und es hilft uns automatisch, Standardereignisse zu verhindern, das Aufblähen von Ereignissen zu verhindern usw. Wir teilen Vue dann die Modifikatoren mit, die Vue uns zur Verfügung stellt. Die Modifikatoren werden durch das Befehlssuffix dargestellt, das mit einem Punkt beginnt.

Das Beispiel der Methode preventDefault zum Verhindern des standardmäßigen Seitenaktualisierungsereignisses des <a>-Tags lautet wie folgt:

Gängige Praxis

<a href="" v-on:click=" rel="external nofollow" pe($event)">Vue-Klicklink</a> //Um auf das ursprüngliche DOM-Ereignis in Vue zuzugreifen, können Sie die spezielle Variable $event verwenden, um es an die Methode zu übergeben. Im ursprünglichen HTML ist es event

// ... 
Methoden: {
    pinkeln){
        e.preventDefault()
    }
}

Verwenden von Modifikatoren

<a v-on:click.prevent>Vue-Klick-Link</a> //Der Prevent-Modifikator entspricht dem obigen e.preventDefault()

Aus dem obigen Beispiel können wir erkennen, dass Modifikatoren syntaktischer Zucker sind, der uns hilft, allgemeine Anforderungen im Voraus zu schreiben und sie nur noch dann zu sagen, wenn wir sie brauchen. Wenn ein Eventhandler vorhanden ist, schreiben Sie ihn anschließend einfach weiter, und zwar wie folgt:

<a href="" v-on:click.prevent=" rel="external nofollow" pp">Vue-Klick-Link</a>

// ... 
Methoden: {
    pp(){
        console.log('Nicht zum Seitenausführungsereignis springen')
    }
}

Modifikatoren werden nacheinander ausgeführt, wie beispielsweise das obige v-on:click.prevent="pp", was bedeutet, dass beim Klicken zuerst der Modifikator „Prevent“ ausgeführt wird, um das Standardereignis zu verhindern, und dann die nachfolgende pp-Ereignisverarbeitungsfunktion ausgeführt wird.

Die Modifikatoren entsprechen fast eins zu eins den entsprechenden Verarbeitungsfunktionen des Ereignisses. Je nach Ereignis werden die Modifikatoren, die den verschiedenen Ereignissen entsprechen, in mehrere Kategorien unterteilt, wie unten dargestellt:

Der Ursprung und die Bedeutung der Modifikatoren sind wie oben beschrieben. Was die spezifischen Modifikatoren betrifft, können Sie auf der offiziellen Website nachlesen, was Sie für die tatsächliche Verwendung benötigen. Es gibt zwei am häufigsten verwendete Modifikatoren, die Sie sich merken müssen: @click.stop verhindert das Aufsteigen von Ereignissen, @click.prevent verhindert das Standardereignis und @keypress.enter ist das Ereignis „Enter“, bei dem die Taste gedrückt wird.

3. .sync-Modifikator

Der .sync-Modifikator ist relativ speziell, da er keine Weiterentwicklung der ursprünglichen Ereignisverarbeitungsfunktionen des Ereignisses ist, sondern ein von Vue selbst definierter Modifikator. Beispielsweise wird .sync in der obigen Modifikatorklassifizierung auch als Modifikator eines benutzerdefinierten Ereignisses klassifiziert. Was genau ist also dieses benutzerdefinierte Ereignis?

Dieses Ereignis entspricht dem eventBus-Ereignis. Das eventBus-Ereignis ist ein Muster in MVC. Einfach ausgedrückt handelt es sich um einen Prozess des Veröffentlichens und Abonnierens. Das heißt, es gibt zwei Parteien. Partei A ist dafür verantwortlich, immer auf ein bestimmtes Ereignis zu hören, und Partei B ist dafür verantwortlich, dieses Ereignis bei Bedarf auszulösen. Partei A führt bestimmte Vorgänge aus, wenn sie hört, dass das Ereignis ausgelöst wird. Partei A abonniert und Partei B veröffentlicht, und beide Parteien befinden sich in einem Veröffentlichungs- und Abonnementmodell.

Wann wäre dies also in Vue erforderlich?

Das heißt, wenn eine Vue-Komponente externe Dateneigenschaften akzeptiert, legt Vue fest, dass die untergeordnete Komponente erst dann das Recht hat, die Daten zu verwenden, wenn sie die externen Daten über Eigenschaften akzeptiert hat, jedoch nicht das Recht, die Eigenschaften zu ändern. Denn wenn die untergeordnete Komponente die von außen übertragenen Daten ändert, können die untergeordnete Komponente und die übergeordnete Datei, die sie verwendet, hin und her geändert werden, und es gibt keine offensichtliche Quelle der Änderung in der übergeordneten Komponente und der untergeordneten Komponente. Am Ende weiß niemand, wer die Daten geändert hat, und die Daten werden schwer zu kontrollieren. Daher legt Vue fest, dass Komponenten nur die Eigenschaften von Requisiten verwenden und diese nicht selbst ändern können. Wenn sie Änderungen vornehmen möchten, müssen sie den tatsächlichen Eigentümer der zu ändernden Daten benachrichtigen, dh die übergeordnete Datei, die die Komponente verwendet.

Die verwendete Benachrichtigungsmethode ist der EventBus-Publish- und Subscribe-Modus.

.sync wird nicht verwendet

Unterkomponente löst ein Ereignis aus. Das Ereignisnamenformat muss update:myPropName sein und wird mit der Funktion $emit ausgelöst.

this.$emit('update:title', newTitle) //newTitle ist der Wert, den Sie ändern möchten, nachdem die Props-Daten geändert wurden

Die übergeordnete Komponente kann auf dieses Ereignis hören und bei Bedarf eine lokale Dateneigenschaft aktualisieren.

<myconponent :title="Ptitle" @update:title="Ptitle = $event" ></myconponent>
//Hören Sie auf das Ereignis in der übergeordneten Komponente. Der nach dem Auslösen des Ereignisses übergebene Wert wird als $event empfangen. $event === newTitle. Ptitle sind die Daten der übergeordneten Komponente.

Oder die definierten Accept-Funktionsparameter

<myconponent :title="Ptitle" @update:title="val => Ptitle = val" ></myconponent>
//Der zu diesem Zeitpunkt empfangene Wert wird als Parameter der Funktion verwendet

Verwenden von .sync

Der obige Prozess ist in der Praxis sehr verbreitet, daher definiert Vue das Abhören der übergeordneten Komponente als Wertübergabemodifikator .sync. Der obige Code lautet:

Unterkomponenten (dasselbe)

dies.$emit('update:title', neuerTitel)

Übergeordnete Komponente

<myconponent :title.sync="Ptitle"></myconponent> //Entspricht der Wertübergabe und Überwachung oben

Ist es nicht süß?

4. Zusammenfassung

Regeln für die Verwendung von .sync

1. Komponenten können externe Daten von Requisiten nicht ändern

2. this.$emit kann Ereignisse auslösen und Parameter übergeben

3.$event kann die Parameter von $emit abrufen

Oben finden Sie eine ausführliche Erläuterung des Synchronisierungsmodifikators von Vue. Weitere Informationen zum Synchronisierungsmodifikator von Vue finden Sie in den anderen verwandten Artikeln auf 123WORDPRESS.COM!