Detaillierte Erklärung des Unterschieds zwischen der v-model-Direktive und dem .sync-Modifikator in Vue

V-Modell

    <!--Übergeordnete Komponente-->
    <Vorlage>
        <!--v-model-Direktive ist syntaktischer Zucker-->
        <Untergeordnetes v-Modell="Modell"></Untergeordnetes>
        <!-- Die Erweiterung der v-model-Direktive entspricht dem folgenden Code-->
        <!-- Das Standardereignis für die V-Model-Bindung ist die Eingabe und die Standardeigenschaft ist das Werteattribut-->
        <Untergeordnetes Element: Wert = "Modell" @Eingabe = "Modell = $Ereignis"></Untergeordnetes Element>
    </Vorlage>

Sie können die Standardereignisse und benutzerdefinierten Eigenschaften der V-Model-Bindung auch über die Modelloption in der untergeordneten Komponente ändern:

 //Unterkomponente Export Standard {
  Modell: {
         Requisite: "geprüft",
         Ereignis: „Ändern“
     }
 }

Wenn die entsprechende übergeordnete Komponente das V-Modell verwendet, lautet die entsprechende Operation:

    <Vorlage>
        <Untergeordnetes Element: geprüft = "Modell" @change = "Modell = $event"></Untergeordnetes Element>
    <Vorlage>

Das V-Modell wird normalerweise für Formularsteuerelemente verwendet, da die Komponente auf diese Weise über stärkere Steuerungsmöglichkeiten verfügt

.sync

   <!-- Übergeordnete Komponente -->
    <Vorlage>
        <!-- .sync wurde in v2.4 hinzugefügt, es kann verwendet werden, um die an die untergeordnete Komponente übergebenen Eigenschaften zu ändern -->
        <Kind :xxx.sync="Modell"></Kind>
        <!-- Entspricht dem folgenden Code -->
        <Untergeordnetes Element: xxx = "Modell" @update:xxx = "Modell = $event"></Untergeordnetes Element>
    </Vorlage>
    <!-- Untergeordnete Komponente -->
    <Eingabe: Wert = "xxx" @Eingabe = "$emit('update:xxx', $event.target.value)"/>

Der hier gebundene Attributname xxx kann geändert werden, und der entsprechende Attributname ändert sich ebenfalls:

    <!-- Übergeordnete Komponente -->
    <Vorlage>
        <Kind :foo.sync="Modell"></Kind>
    </Vorlage>
    <!-- Untergeordnete Komponente -->
    <Eingabe: Wert = "foo" @Eingabe = "$emit('update:foo', $event.target.value)"/>

Das Prinzip von .sync verwendet die $emit-Methode der untergeordneten Komponente, um Ereignisse an die übergeordnete Komponente zu versenden. Das Anwendungsszenario besteht darin, dass die untergeordnete Komponente die von der übergeordneten Komponente übergebenen Eigenschaften ändern möchte.

Die Steuerungsmöglichkeiten des Modifikators .sync liegen alle in der übergeordneten Komponente, und der Ereignisname ist relativ fest: update:xxx

Die beiden sind im Wesentlichen gleich, es gibt keinen Unterschied: „Auf ein Triggerereignis warten“ = „(val) => value = val“.

Der Unterschied in den Feinheiten

1. Allerdings entspricht v-model standardmäßig dem Eingabeereignis von Komponenten wie Eingabe oder Textbereich. Wenn dieses Eingabeereignis in der untergeordneten Komponente ersetzt wird, ist sein Wesen genau dasselbe wie das des .sync-Modifikators. Relativ einfach, kann nicht mehrere haben.

// Unterkomponenten können benutzerdefinierte Ereignisse verwenden, um die nativen Eingabeereignisse zu ersetzen, die standardmäßig dem v-Modell entsprechen, aber wir müssen $emit manuell in der Unterkomponente ausführen
Modell: {
        Requisite: "Wert",
        Ereignis: „Update“
},

Eine Komponente kann den Modifikator .sync für mehrere Eigenschaften verwenden und mehrere „Props“ gleichzeitig „bidirektional binden“, anders als beim V-Modell, wo eine Komponente nur eines haben kann.

Fassen Sie die Funktionsszenarien zusammen:

1. Beim V-Modell geht es eher um das endgültige Operationsergebnis, das Ergebnis der bidirektionalen Bindung, den Wert und eine Änderungsoperation.
Zum Beispiel: der Wert des Eingabefelds, die Werteliste des Mehrfachauswahlfelds, die ID-Werteliste der Baumstruktur (sowohl Ant-Design als auch Element) usw.
2..sync zielt auf mehrere Zustände, die gegenseitige Übertragung von Zuständen, Status und eine Aktualisierungsoperation ab.
Beispielsweise: Komponentenladestatus, Untermenü und Erweiterungsliste der Baumstruktur (eine Art Status), interner Überprüfungsstatus einer Formularkomponente usw. …

Es gibt jedoch Ausnahmen, d. h., v-model kann auch einige .sync-Situationen ersetzen. Dies ist der Fall, wenn die einzige Funktion dieser Komponente darin besteht, Zustände zu wechseln, und dieser Zustand der endgültige Betriebswert ist. Zu diesem Zeitpunkt kann der .sync-Modifikator ersetzt werden. Durch die Verwendung zweier unterschiedlicher Methoden der bidirektionalen Bindung können wir die Struktur der Komponente schnell verstehen.