Die benutzerdefinierte Vue-Komponente implementiert eine bidirektionale Bindung

Szenario:

Die von uns häufig verwendeten Interaktionsmethoden zwischen übergeordneten und untergeordneten Komponenten sind:
Die übergeordnete Komponente leitet Daten über Requisiten an die untergeordnete Komponente weiter.
Die untergeordnete Komponente sendet das aktualisierte Array über $emit an die übergeordnete Komponente.

Heute implementieren wir die Interaktion auf eine andere Weise, indem wir uns auf das V-Modell des Eingabefelds beziehen, um die bidirektionale Datenbindung benutzerdefinierter Komponenten zu implementieren.
Das heißt, wenn sich der Wert der übergeordneten Komponente ändert, ändert sich der Wert der untergeordneten Komponente entsprechend; umgekehrt, wenn sich der Wert der untergeordneten Komponente ändert, ändert sich der Wert der übergeordneten Komponente entsprechend

Unterkomponentendefinition:

Da der Wert des Props-Attributs nicht direkt geändert werden kann, definieren wir hier valueData, empfangen den Wert in Echtzeit durch Abhören und ändern valueData über die Klickmethode.
Beachten Sie, dass es sich bei der Sugar-Prop der Modellsyntax um den empfangenen Props-Attributwert handelt, der konsistent gehalten werden sollte. Ereignis ist der Name des zuvor aufgetretenen Ereignisses.

Der Code lautet wie folgt:

<Vorlage>
  <div>
    <div>{{ `Unterkomponentenwert: ${value}` }}</div>
    <div @click="click">Klicken Sie hier, um den Wert zu ändern</div>
  </div>
</Vorlage>

<Skript>
Standard exportieren {
  Name: "",
  Modell: {
    Requisite: "Wert",
    Ereignis: „Ändern“
  },
  Requisiten: {
    Wert: Zahl
  },
  Komponenten: {},
  Daten() {
    zurückkehren {
      Wertdaten: ""
    };
  },
  betrachten:
    Wert(neuerWert, alterWert) {
      this.valueData = neuerWert;
      console.log(`Unterkomponentenwert: ${newValue}`);
    }
  },
  erstellt() {
  },
  montiert() {
  },
  Methoden: {
    klick() {
      dies.valueData++;
      dies.$emit("ändern", dies.valueData);
    }
  }
};
</Skript>
<Stil lang='less' scoped>
</Stil>

Definition der übergeordneten Komponente:

Die übergeordnete Komponente bindet den Textwert über das V-Modell. Der Name muss nicht unbedingt ein Wert sein, es kann jede andere Zeichenfolge sein, die der Namenskonvention entspricht. Hier ist es Text.
Nachdem die untergeordnete Komponente die Daten durch das Änderungsereignis aktualisiert hat, ändert sich der V-Modus-Bindungswert entsprechend.
Oder wenn die übergeordnete Komponente den Textwert ändert, ändert sich der Wert der untergeordneten Komponente entsprechend.

Der Code lautet wie folgt:

<Vorlage>
  <div>
    <div>{{ `Wert der übergeordneten Komponente: ${text}` }}</div>
    <div @click="click">Klicken Sie hier, um den Wert zu ändern</div>


    <span>--------------------------------------------------------------------------</span>

    <test-children v-model="text"></test-children>

  </div>
</Vorlage>

<Skript>
importiere TestChildren aus "@/views/TestChildren";

Standard exportieren {
  Name: "",
  Komponenten: { TestChildren },
  Daten() {
    zurückkehren {
      Text 1
    };
  },
  erstellt() {
  },
  montiert() {
  },
  betrachten:
    text(neuerWert, alterWert) {
      console.log(`Wert der übergeordneten Komponente: ${newValue}`);
    }
  },
  Methoden: {
    klick() {
      dieser.text--;

    }
  }
};
</Skript>
<Stil lang='less' scoped>
</Stil>

Ergebnis:

Kopieren Sie den Code zum Testen direkt in Ihr eigenes Projekt. Ob der Wert von der übergeordneten oder der untergeordneten Komponente geändert wird. Die Werte der beiden durch den v-Modus gebundenen Komponenten sind immer konsistent.

Fragen und Antworten:

Ein Klassenkamerad fragte: Ist das nicht dasselbe, wie wenn Daten durch Props nach unten fließen und dann durch $emit nach oben weitergegeben werden? Es kann auch den Effekt einer bidirektionalen Bindung wie bei mir erzielen. Wenn wir das V-Modell nicht verwenden, schreiben wir zwangsläufig den folgenden Code in die übergeordnete Komponente:

<test-children @change="changeText"></test-children>

Ändern Sie dann den Textwert, indem Sie die Methode changeText definieren.

Stellen Sie sich vor, dass wir bei einer komplexeren Seite und einer größeren Anzahl referenzierter Komponenten mehr als zehn oder zwanzig Methoden wie diese auf der Seite definieren müssen. Die Anzahl der lesbaren Zeilen wird erheblich reduziert, was zu höheren Wartungskosten führt.

Erweiterungen:

Nach vue2.3 wird die Synchronisierungsmethode bereitgestellt, mit der auch eine bidirektionale Bindung realisiert werden kann

Schreiben in die übergeordnete Komponente:

<test-children :value.sync="text"></test-children>

Die folgende Modelldefinition wird in der Unterkomponente nicht benötigt, löschen Sie sie einfach.

Modell: {
Requisite: "Wert",
Ereignis: „Ändern“
},

Die Übergabe der Daten an die übergeordnete Komponente erfolgt mit der folgenden Methode:

dies.$emit("update:value", dies.valueData);

Das Obige ist der vollständige Inhalt dieses Artikels. Ich hoffe, er wird für jedermanns Studium hilfreich sein. Ich hoffe auch, dass jeder 123WORDPRESS.COM unterstützen wird.