Grundlegende Implementierungsmethode für die komponentenübergreifende Bindung mithilfe des V-Modells in Vue

Hallo allerseits, heute werden wir darüber sprechen, wie man mit dem V-Modell den Bindungseffekt von Eltern-Kind-Komponenten erzielt

1: Der Code der einfachen Version lautet wie folgt:

Übergeordnete Komponente:

<Vorlage>
  <div>
  // 3: Verwenden Sie untergeordnete Komponenten und verwenden Sie v-model zum Binden von <About v-model="father"/>
  </div>
</Vorlage>

<Skript>
// 1: Unterkomponente importieren import About von "./About";
Standard exportieren {
// 2: Unterkomponenten registrieren: {
    Um,
  },
  Daten() {
      zurückkehren {
      //Wert für leeren Vater:''
      }
  },
  //Änderungen an Komponentendaten überwachen watch:{
      Vater(Wert){
          konsole.log(Wert);
      }
  }
};
</Skript>

Unterkomponenten:

<Vorlage>
  <div>
  // 2: Verwenden Sie v-model zum Binden von <input type="text" v-model="son">
  </div>
</Vorlage>

<Skript>
Standard exportieren {
    // 1: Empfange Informationseigenschaften von der übergeordneten Komponente: {
        Wert:{
            Typ: Zeichenfolge,
            Standard:''
        }
    },
    Daten() {
        zurückkehren {
        // 3: Weisen Sie einen leeren Wert zu son:''
        }
    },
    // 4: Auf Änderungen achten watch:{
        // Dem Sohn einen Wert zuweisen   
        Wert(){
        // Hier ist this.value der Wert in props
            dieser.Sohn = dieser.Wert
        },
        // Son an die übergeordnete Komponente übergeben son(){
            dies.$emit('Eingabe',dieses.Sohn)
        }
    }
}
</Skript>

Warum der erste Parameter von $emit „Input“ ist, wenn die untergeordnete Komponente an die übergeordnete Komponente übergeben wird, erfahren Interessierte im Prinzip der V-Modell-Implementierung.

2: Fahren wir mit der Verwendung im Projekt fort (Bildadresse der untergeordneten Komponente abrufen, an die übergeordnete Komponente weitergeben und Bildinformationen synchron aktualisieren).

Im Grunde das Gleiche

Ⅰ: Führen Sie eine untergeordnete Komponente in die übergeordnete Komponente ein, verwenden Sie v-model im Tag der untergeordneten Komponente und weisen Sie ihm einen leeren Wert zu.
(Das UploadImg-Tag ist eine importierte Unterkomponente)

Ⅱ: Verwenden Sie dann Requisiten zum Empfangen in der untergeordneten Komponente:

III: Verwenden Sie das V-Modell auch auf der Unterkomponentenseite und weisen Sie den Daten ein leeres Bild zu:

IV: Verwenden Sie watch in Unterkomponenten, um deren Änderungen zu überwachen

Code im Zerlegungsdiagramm:

Die Wertfunktion weist die übergebene übergeordnete Komponente der untergeordneten Komponente zu. Dieser Wert ist der Wert in den Eigenschaften.

Wert() {
      dies.SonStaffPhoto = dieser.Wert
      Konsole.log(dieses.SonStaffPhoto)
    }

Hier ist die an das V-Modell gebundene Funktion der untergeordneten Komponente, die verwendet wird, um sich selbst an die übergeordnete Komponente zu übergeben.

SonStaffPhoto() {
      dies.$emit('Eingabe', dies.SonStaffPhoto)
    },

An dieser Stelle können Sie den Inhalt, den Sie an die übergeordnete Komponente übergeben möchten, this.SonStaffPhoto zuweisen (ich habe ihn der Variable zugewiesen, die zum Speichern der Bildadresse verwendet wird).

V: Sie können Änderungen auch in der übergeordneten Komponente überwachen:

Diesem .staffPhoto in der übergeordneten Komponente kann auch der Inhalt zugewiesen werden, den Sie daran binden möchten (ich habe es der neuesten Bildvariable zugewiesen, damit das Bild der untergeordneten Komponente aktualisiert wird und die übergeordnete Komponente ebenfalls synchron aktualisiert wird).

Zusammenfassen

Damit ist dieser Artikel über die grundlegende Implementierungsmethode der komponentenübergreifenden Bindung mithilfe des V-Modells in Vue abgeschlossen. Weitere relevante Inhalte zur komponentenübergreifenden Bindung mithilfe des V-Modells in Vue finden Sie in früheren Artikeln auf 123WORDPRESS.COM oder in den folgenden verwandten Artikeln. Ich hoffe, Sie werden 123WORDPRESS.COM auch in Zukunft unterstützen!