Detaillierte Erläuterung der Werteübertragung von Vue-Eltern-Kind-Komponenten und der Probleme beim unidirektionalen Datenfluss

Vorwort

Wir wissen, dass das Kernkonzept der Eltern-Kind-Komponenten in Vue das Problem des Einweg-Datenflusses ist und Requisiten nur in eine Richtung weitergegeben werden. Was genau ist also das unidirektionale Datenflussproblem? Dieser Artikel fasst die Studiennotizen zu diesem Wissenspunkt zusammen.

1. Die übergeordnete Komponente übergibt den Wert an die untergeordnete Komponente

<div id="app">
    <blog-item :title="Titel"></blog-item>
</div>
// Unterkomponente definieren Vue.component("blog-item", {
      Requisiten: ['Titel'],
      Daten() {
        zurückkehren {
        }
      },
      Vorlage: "<p>{{title}}</p>"
 })
// Definieren Sie die übergeordnete Komponente new Vue({
      el: "#app",
      Daten() {
        zurückkehren {
          Titel: "Nachricht",
        }
      },
    })

Die übergeordnete Komponente übergibt den Wert an die untergeordnete Komponente durch :title = "title". Die untergeordnete Komponente empfängt den Wert der übergeordneten Komponente durch Eigenschaften und rendert ihn dann durch einen Interpolationsausdruck auf der Seite.

2. Problem mit der Typbeschränkung für Unterkomponenten-Requisiten

Allgemeine Typbeschränkungen sind wie folgt:

Requisiten: {
      Titel: String,
      mag: Anzahl,
      isPublished: Boolesch,
      Kommentar-IDs: Array,
      Autor: Objekt,
      Rückruf: Funktion,
      contactsPromise: Promise // oder ein anderer Konstruktor
    }

Zusätzlich zu den oben genannten allgemeinen Typen bietet Vue auch Konstruktoren und benutzerdefinierte Funktionen zum Anpassen der Typen von untergeordneten Komponenteneigenschaften.

(1) Benutzerdefinierter Konstruktortyp

//Benutzerdefinierte Funktion, die beiden Komponenten gemeinsam ist function Person(firstName, lastName) {
        this.firstName = Vorname
        this.lastName = Nachname
      }
      //Verwenden Sie Vue.component('blog-post', {
      Requisiten: {
        Autor: Person
      }
      //Wird in der übergeordneten Komponente verwendet var obj = new Person("1","2")
      <Blog-Beitrag: Autor = 'Obj'></Blog-Beitrag>

Im obigen Code definieren wir zunächst einen öffentlichen benutzerdefinierten Konstruktor, mit dem ein Objekt erstellt werden kann. Das Instanzobjekt hat zwei Eigenschaften: firstName und lastName. In der übergeordneten Komponente rufen wir den Konstruktor auf, um eine obj-Instanz zu erstellen und sie an die untergeordnete Komponente zu übergeben. Die untergeordnete Komponente definiert eine Eigenschaft des Konstruktortyps, um das Objekt zu empfangen.

(2) Benutzerdefinierte Funktionen und benutzerdefinierte Typen

// Benutzerdefinierte Funktion Vue.component('blog-post', {
      Requisiten: {
        propsA: String, //Muss ein String-Typ sein propsB: [String, Number], //Mehrere optionale Typen propsC: {type: Number, default: 100}, //Definiere den Typ und lege den Standardwert fest //Benutzerdefinierte Validierungsfunktion propsD: {
          Validator: Funktion (Wert) {
            // Dieser Wert muss mit einem der folgenden Strings übereinstimmen return ['success', 'warning', 'danger'].indexOf(value) !== -1
         }
        }
      }

Vue bietet eine sehr flexible Möglichkeit, den Typ der Parameter zu definieren, die von untergeordneten Komponenten empfangen werden. Im obigen Code wird eine benutzerdefinierte Validierungsfunktion verwendet, um den Werttyp in der übergeordneten Komponente einzuschränken.

3. Problem des Einweg-Datenflusses

Der unidirektionale Datenfluss ist das Kernkonzept der übergeordneten und untergeordneten Komponenten in Vue, und Requisiten sind unidirektional gebunden. Wenn sich der Eigenschaftswert der übergeordneten Komponente ändert, wird er zur entsprechenden Änderung an die untergeordnete Komponente weitergegeben, wodurch eine einseitige Abwärtsbindung entsteht. Die Eigenschaftsänderung der übergeordneten Komponente fließt an die nachgelagerte untergeordnete Komponente. Um jedoch zu verhindern, dass die untergeordnete Komponente versehentlich die Daten in der übergeordneten Komponente ändert und den Status anderer untergeordneter Komponenten beeinflusst, legt Vue fest, dass ein Datenfluss von unten nach oben nicht zulässig ist.

Wenn sich die Eigenschaft der übergeordneten Komponente ändert, wird sie an die untergeordnete Komponente weitergegeben, aber die Eigenschaftsänderung der untergeordneten Komponente wirkt sich nicht auf die übergeordnete Komponente aus. In diesem Fall haben Sie möglicherweise das Gefühl, dass Props etwas nutzlos sind. Sie können nur beim Initialisieren der Komponente verwendet werden und können nicht in der untergeordneten Komponente bedient werden. Wenn wir sie verwenden, haben wir daher häufig zwei Möglichkeiten, Props zu bedienen: (1) Definieren Sie eine lokale Variable, initialisieren Sie sie mit Props und bedienen Sie dann diese lokale Variable. (2) Definieren Sie eine berechnete Eigenschaft, verarbeiten Sie Eigenschaften und geben Sie sie zurück.

<div id="app">
    <blog-item :title="Titel1"></blog-item>
    <blog-item :title="title2"></blog-item>
    <blog-item :title="title3"></blog-item>
    <hr>
    <button @click='toclick'>Klick mich</button>
  </div>
  // Unterkomponente definieren Vue.component("blog-item", {
      Requisiten: ['Titel'],
      Daten() {
        zurückkehren {
        }
      },
      Vorlage: "<p>{{title}}</p>"
    })
    // Übergeordnete Komponente new Vue({
      el: "#app",
      Daten() {
        zurückkehren {
          Titel1: "111",
          Titel2: "222",
          Titel3: "333"
        }
      },
      Methoden: {
        klicken() {
          dieser.Titel3 = "000"
        }
      }
    }) 

<div id="app">
    <blog-item :title="Titel"></blog-item>
  </div>
  // Unterkomponente definieren Vue.component("blog-item", {
      Requisiten: ['Titel'],
      berechnet: {
        berechneterTitel() {
          returniere "berechneterTitel" + dieser.Titel
        }
      },
      Daten() {
        zurückkehren {
          Untertitel: "Untertitel" + dieser.Titel
        }
      },
      Vorlage: "<p>{{title}}==={{subTitle}}==={{computedTitle}}</p>"
    })
    // Übergeordnete Komponente new Vue({
      el: "#app",
      Daten() {
        zurückkehren {
          Titel: "111",
        }
      },
    }) 

Zusammenfassen

Dies ist das Ende dieses Artikels über die Wertübertragung zwischen übergeordneten und untergeordneten Komponenten von Vue und das Problem des einseitigen Datenflusses. Weitere relevante Inhalte zur Wertübertragung zwischen übergeordneten und untergeordneten Komponenten von Vue und dem einseitigen Datenfluss finden Sie in früheren Artikeln auf 123WORDPRESS.COM oder durchsuchen Sie die verwandten Artikel weiter unten. Ich hoffe, Sie werden 123WORDPRESS.COM auch in Zukunft unterstützen!