Detaillierte Erläuterung der Verwendung des Synchronisierungsmodifikators bei der Parameterübertragung von übergeordneten und untergeordneten Komponenten in Vue3

Erläuterung des unidirektionalen Datenflusses

Einweg-Datenfluss (der Heap kann geändert werden, der Stack kann nicht geändert werden)

Wir alle wissen, dass es sich bei der Datenübertragung vom übergeordneten Element an das untergeordnete Element um einen Einwegdatenfluss handelt, d. h. die untergeordnete Komponente kann die vom übergeordneten Element übergebenen Werte nicht direkt ändern.

Tatsächlich gilt jedoch für das Ändern von Werten: Grundlegende Datentypen können nicht geändert werden, komplexe Datentypen ändern die Referenzadresse (den Stapel) nicht und ihr Wert kann nach Belieben geändert werden.

Vue2.x-Nutzung

Definieren Sie die Form des Ereignisses, um die übergeordnete Komponente über die Änderung zu informieren

Das ist die grundlegendste Verwendung: props+$emit

Schreibmethode:

Verwendung von .sync und Update:

Wenn die übergeordnete Komponente den Wert übergibt, fügen Sie einfach .sync nach der Variablen hinzu.

Die untergeordnete Komponente this.$emit("update:變量", 實參) kann den von der übergeordneten Komponente übergebenen Wert ändern.

Schreibmethode:

Von Eltern zu Kind, Abkürzung für die Weitergabe mehrerer Daten

Wenn der an die untergeordnete Komponente übergebene Wert aus mehreren Daten besteht, können Sie mithilfe von v-bind mehrere Daten direkt in ein Objekt einschließen.

Hinweis: v-bind.sync="doc";

Was an die untergeordnete Komponente übergeben wird, ist kein Doc-Objekt;

Aber jedes Attribut im Objekt.

Schreibmethode:

V-Modell-Abkürzung verwenden (strenge Anforderungen)

Übergeordnete Komponente: v-model , untergeordnete Komponente: Die empfangene Variable muss value sein und das von $emit übermittelte Ereignis muss input sein.

Schreibmethode:

Vue3.x-Nutzung

Mit v-model können im Vergleich zu 2.x nun mehrere v-models für eine Komponente verwendet werden, was der Verwendung von Vue2.x-Modifikatoren entspricht.

Allgemeine Verwendung

Verwenden Sie v-model , wenn Sie die übergeordnete Komponente übergeben, und verwenden Sie emit("uodate: num", 實參) wenn Sie die untergeordnete Komponente ändern.

Schreibmethode:

Abkürzung

Wenn die von der übergeordneten Komponente an die untergeordnete Komponente übergebene Variable den Namen modelValue hat, können Sie diese Methode verwenden

Schreibmethode:

Oben finden Sie den detaillierten Inhalt der ausführlichen Erklärung zur Verwendung des Synchronisierungsmodifikators bei der Parameterübergabe von Vue3-Eltern-Kind-Komponenten. Weitere Informationen zur Parameterübergabe von Vue3-Eltern-Kind-Komponenten finden Sie in den anderen verwandten Artikeln auf 123WORDPRESS.COM!