Detaillierte Erklärung, wie Vue-Komponenten Werte untereinander übertragen

Überblick

Wir alle wissen, dass Vue ein leichtgewichtiges Front-End-Framework ist, dessen Kern die komponentenbasierte Entwicklung ist. Vue besteht aus einzelnen Komponenten. Die Komponentisierung ist sein Wesen und eines seiner leistungsstärksten Features. Die Bereiche der Komponenteninstanzen sind voneinander unabhängig, was bedeutet, dass Daten zwischen verschiedenen Komponenten nicht aufeinander verweisen können.

Da wir im eigentlichen Projektentwicklungsprozess jedoch auf die Daten anderer Komponenten zugreifen müssen, besteht ein Problem bei der Komponentenkommunikation. Die Beziehungen zwischen Komponenten in Vue sind: Vater und Kind, Brüder und Generationen auseinander. Als nächstes sprechen wir darüber, wie die Datenübertragung für verschiedene Beziehungen realisiert wird.

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

Das heißt, die übergeordnete Komponente übergibt Werte über Attribute an die untergeordnete Komponente und die untergeordnete Komponente empfängt sie über Requisiten.

Binden Sie benutzerdefinierte Eigenschaften im untergeordneten Komponententag der übergeordneten Komponente

// Übergeordnete Komponente <user-detail :myName="name" />
    
Standard exportieren {
    Komponenten:
        Benutzerdetails
    }
    ......
}

Verwenden Sie Props (die ein Array oder ein Objekt sein können), um es in der untergeordneten Komponente zu empfangen. Es können mehrere Attribute übergeben werden.

// Unterkomponente Export Standard {
    Requisiten: ['meinName']
}
​
/*
props: { myName: String } //Gebe den so übergebenen Typ an. Bei einem falschen Typ wird eine Warnung ausgegeben props: { myName: [String, Number] } // Mehrere Typen möglich prosp: { myName: { type: String, requires: true } } //Erforderlicher String props: { 
    KindMsg: { 
        Typ: Array, 
        Standard: () => [] 
    }
} // default gibt den Standardwert an. Wenn die Validierung der Eigenschaften fehlschlägt, wird in der Konsole eine Warnung ausgegeben.
*/

Die von der untergeordneten Komponente empfangenen Werte der übergeordneten Komponente werden in Referenztyp und gemeinsamen Typ unterteilt:

Gängige Typen: Zeichenfolge, Zahl, Boolescher Wert, Null

Referenztypen: Array, Objekt

Basierend auf dem Einweg-Datenfluss von Vue, d. h. der Datenfluss zwischen den Komponenten ist unidirektional, und untergeordnete Komponenten dürfen die von der übergeordneten Komponente übergebenen Werte nicht direkt ändern. Daher sollte dieser Vorgang der direkten Änderung der von der übergeordneten Komponente übergebenen Werte vermieden werden, da sonst die Konsole einen Fehler meldet.

Wenn der übergebene Wert ein einfacher Datentyp ist, kann er in der untergeordneten Komponente geändert werden, ohne dass dies Auswirkungen auf andere Geschwisterkomponenten hat, die den Wert ebenfalls von der übergeordneten Komponente abrufen.

Die konkrete Operation besteht darin, zunächst den übergebenen Wert einer Variablen in den Daten neu zuzuweisen und dann diese Variable zu ändern.

// Unterkomponente Export Standard {
    Requisiten: ['meinName'],
    Daten() {
        zurückkehren {
            name : this.myName // Weise den übergebenen Wert der neuen Variable zu}
    },
    betrachten:
        meinName(neuerWert) {
            this.name = newVal //Hören Sie auf den von der übergeordneten Komponente übergebenen Wert und ändern Sie bei einer Änderung auch den Wert innerhalb der untergeordneten Komponente}
    },
    Methoden: {
        ändereName() {  
            this.name = 'Lily' // Hier wird nur der interne Wert geändert, daher wird kein Fehler gemeldet},
    }
}

Hinweis: Wenn Sie watch nicht verwenden, um auf den von der übergeordneten Komponente übergebenen myName-Wert zu hören, ändert sich der Name-Wert in der untergeordneten Komponente nicht mit dem myName-Wert der übergeordneten Komponente, da name: this.myName in data nur einen Anfangswert definiert.

Wenn der Wert des Referenztyps in der untergeordneten Komponente geändert wird, wird auch die übergeordnete Komponente geändert, da ihre Daten öffentlich sind. Andere untergeordnete Komponenten, die ebenfalls auf den Wert verweisen, werden ebenfalls geändert. Es ist klar, dass die Übergabe des Wertes von der übergeordneten Komponente an die untergeordnete Komponente dem Erstellen einer Kopie entspricht und der Zeiger dieser Kopie immer noch auf den in der übergeordneten Komponente zeigt, d. h., er teilt sich dieselbe Referenz. Nehmen Sie daher keine vorschnellen Änderungen vor, es sei denn, es besteht ein besonderer Bedarf.

2. Untergeordnete Komponenten übergeben Werte an übergeordnete Komponenten

1. Die Unterkomponente bindet ein Ereignis und löst es durch this.$emit() aus.

Binden Sie ein Ereignis in der untergeordneten Komponente und definieren Sie eine Funktion für dieses Ereignis

// Untergeordnete Komponente <button @click="changeParentName">Ändern Sie den Namen der übergeordneten Komponente</button>
​
Standard exportieren {
    Methoden: {
        //Unterkomponentenereignis changeParentName: function() {
            this.$emit('handleChange', 'Jack') // Löse das handleChange-Ereignis in der übergeordneten Komponente aus und übergebe es an Jack
            // Hinweis: Der Ereignisname hier muss mit dem in der übergeordneten Komponente gebundenen Ereignisnamen übereinstimmen}
    }
}

Definieren und binden Sie das handleChange-Ereignis in der übergeordneten Komponente

// Übergeordnete Komponente <child @handleChange="changeName"></child>
​
Methoden: {
    changeName(name) { // Der Name-Parameter ist der von der untergeordneten Komponente Jack übergebene Wert.
        dieser.name = Name
    }
}

2. Durch Rückruffunktion

Definieren Sie zunächst eine Rückruffunktion in der übergeordneten Komponente und übergeben Sie die Rückruffunktion an diese

// Übergeordnete Komponente <child :callback="callback"></child>
​
Methoden: {
    Rückruf: Funktion(Name) {
        dieser.name = Name
    }
}

Empfangen Sie in der untergeordneten Komponente und führen Sie die Rückruffunktion aus

// Untergeordnete Komponente <button @click="callback('Jack')">Ändern Sie den Namen der übergeordneten Komponente</button>
​
Requisiten: {
    Rückruf: Funktion,
}

3. Zugriff auf Komponenteninstanzen über $parent / $children oder $refs

Beide Methoden holen sich die Komponenteninstanz direkt und Sie können nach der Verwendung die Komponentenmethode aufrufen oder direkt auf die Daten zugreifen.

// Unterkomponente Export Standard {
  Daten () {
    zurückkehren {
      Titel: „Unterkomponente“
    }
  },
  Methoden: {
    sagHallo() {
        console.log('Hallo');
    }
  }
}

// Übergeordnete Komponente <template>
  <child ref="childRef" />
</Vorlage>
​
<Skript>
  Standard exportieren {
    erstellt () {
      // Zugriff auf die untergeordnete Komponente über $ref console.log(this.$refs.childRef.title); // Untergeordnete Komponente this.$refs.childRef.sayHello(); // Hallo
      
      //Rufen Sie die Methode der untergeordneten Komponente über $children auf this.$children.sayHello(); // Hallo 
    }
  }
</Skript>

Hinweis: Eine solche Komponentenkommunikation kann nicht Ebenen überschreiten.

3. Übertragen von Werten zwischen Geschwisterkomponenten

1. Immer noch durch die Kombination von $emit und props

Binden Sie in der übergeordneten Komponente die an die beiden übergeordneten Komponenten zu übergebenden Variablen und definieren Sie die Ereignisse

// Übergeordnete Komponente <child-a :myName="name" />
<child-b :meinName="Name" @changeName="Name bearbeiten" />  
    
Standard exportieren {
    Daten() {
        zurückkehren {
            Name: 'John'
        }
    },
    Komponenten:
        'child-a': KindA,
        'child-b': KindB,
    },
    Methoden: {
        editName(Name) {
            dieser.name = Name
        },
    }
}

Empfangen Sie Variablen und binden Sie Triggerereignisse in der untergeordneten Komponente B.

// untergeordnete Komponente b<p>Name: {{ meinName }}</p>
<button @click="changeName">Name ändern</button>
    
<Skript>
Standard exportieren {
    Requisiten: ["meinName"],
    Methoden: {
        ändereName() {
            this.$emit('changeName', 'Lily') // Ereignis auslösen und Wert übergeben}
    }
}
</Skript>

// untergeordnete Komponente<p>Name: {{ newName }}</p>
    
<Skript>
Standard exportieren {
    Requisiten: ["meinName"],
    berechnet: {
        neuerName() {
            if(this.myName) { // Prüfen, ob ein Wert übergeben wurde return this.myName
            }
            return 'John' //Standardwert, wenn kein Wert übergeben wird}
    }
}
</Skript>

Das heißt, wenn die untergeordnete Komponente B die Ereignisfunktion editName der übergeordneten Komponente über $emit() auslöst und den Wert des Variablennamens der übergeordneten Komponente ändert, kann die übergeordnete Komponente den geänderten Wert über Props an die untergeordnete Komponente A weitergeben und so die Datenübertragung zwischen Geschwisterkomponenten realisieren.

2. Durch eine leere Vue-Instanz

Erstellen Sie eine EventBus.js-Datei und stellen Sie eine Vue-Instanz bereit

Vue aus „Vue“ importieren
exportiere standardmäßig neues Vue()

Importieren Sie diese leere Vue-Instanz in die Datei, um den Wert zu übergeben, das Ereignis zu binden und die Ereignisfunktion über $emit auszulösen

(Sie können die JS-Datei auch global in main.js importieren. Ich importiere sie normalerweise in die Komponenten, die ich verwenden muss.)

<Vorlage>
    <div>
        <p>Name: {{ name }}</p>
        <button @click="changeName">Name ändern</button>
    </div>
</Vorlage>
​
<Skript>
importiere { EventBus } aus "../EventBus.js"
​
Standard exportieren {
 Daten() {
     zurückkehren {
         Name: 'John',
     }
  },
  Methoden: {
      ändereName() {
          dieser.name = "Lily"
          EventBus.$emit("editName", this.name) // ein globales Ereignis auslösen und den geänderten Wert an die Ereignisfunktion übergeben}
    }
}
</Skript>

Importieren Sie die Vue-Instanz in die Komponente, die den Wert empfängt, hören Sie den Rückruf über $on ab und die Rückruffunktion empfängt alle übergebenen Parameter, wenn das Ereignis ausgelöst wird.

importiere { EventBus } aus "../EventBus.js"
​
Standard exportieren {
    Daten() {
        zurückkehren {
            Name: ''
        }
    },
    erstellt() {
         EventBus.$on('editName', (name) => {
             dieser.name = Name
         })
    }
}

Diese Methode zum Erstellen einer leeren Vue-Instanz entspricht dem Erstellen eines Ereigniszentrums oder einer Transitstation zum Senden und Empfangen von Ereignissen. Diese Methode ist auch auf jede Kommunikation zwischen Komponenten anwendbar, einschließlich über- und untergeordneter Komponenten, Geschwisterkomponenten und plattformübergreifender Komponenten. Sie ist praktisch für Projekte mit einfachen Kommunikationsanforderungen, aber für komplexere Situationen oder größere Projekte können Sie den komplexeren Statusverwaltungsmodus Vuex verwenden, der von Vue bereitgestellt wird, um damit umzugehen.

4. Mehrschichtige Kommunikation zwischen übergeordneten und untergeordneten Komponenten

Manchmal sind die beiden Komponenten, die kommunizieren müssen, keine direkten Eltern-Kind-Komponenten, sondern Großvater-Enkel-Komponenten oder Eltern-Kind-Komponenten, die sich über mehrere Ebenen erstrecken. In diesem Fall ist es für die Kindkomponente unmöglich, Parameter jeweils eine Ebene nach oben weiterzugeben. Insbesondere wenn die Komponentenhierarchie tief ist und viele verschachtelte Komponenten vorhanden sind, müssen viele Ereignisse und Attribute weitergegeben werden, was den Code sehr verwirrend macht.

Zu diesem Zeitpunkt müssen Sie die von Vue bereitgestellte Methode auf höherer Ebene verwenden: provide/inject.

Dieses Optionspaar sollte zusammen verwendet werden, um einer Vorgängerkomponente das Einfügen einer Abhängigkeit in alle ihre Nachkommen zu ermöglichen, unabhängig davon, wie tief die Komponentenhierarchie ist. Dies funktioniert immer, solange die Upstream- und Downstream-Beziehungen bestehen.

Bereitstellen/Einfügen: Einfach ausgedrückt werden Variablen über den Anbieter in der übergeordneten Komponente bereitgestellt und dann über Einfügen in die untergeordnete Komponente eingefügt. Unabhängig davon, wie tief die Komponentenhierarchie ist, ist die Variable während des Lebenszyklus der übergeordneten Komponente immer gültig.

Übergeordnete Komponente:

Standard exportieren {
  provide: { // Seine Funktion besteht darin, allen untergeordneten Komponenten die Variable **name** bereitzustellen.
    Name: 'Jack'
  }
}

Unterkomponenten:

Standard exportieren {
  inject: ['name'], // Fügt die von der übergeordneten Komponente bereitgestellte Namensvariable ein, die mounted () {
    console.log(dieser.name); // Jack
  }
}

Hinweis: Provide- und Inject-Bindungen sind nicht reaktiv. Das heißt, wenn sich der Name der übergeordneten Komponente ändert, wird die untergeordnete Komponente nicht entsprechend geändert.

Wenn Sie Datenantworten bereitstellen und einfügen möchten, gibt es zwei Möglichkeiten:

Stellen Sie eine Instanz der Vorgängerkomponente bereit und fügen Sie dann Abhängigkeiten in die Nachfolgerkomponente ein, sodass die Eigenschaften der Vorgängerkomponenteninstanz direkt in der Nachfolgerkomponente geändert werden können. Diese Methode hat jedoch den Nachteil, dass viele unnötige Dinge wie Requisiten und Methoden auf dieser Instanz gemountet werden.

// Übergeordnete Komponente <div>
      <button @click="changeName">Name ändern</button>
      <child-b />
</div>
<Skript>
    ......
    Daten() {
        zurückkehren {
            Name: "Jack"
        };
    },
    bieten() {
        zurückkehren {
            parentObj: this //Stellt eine Instanz der Vorgängerkomponente bereit};
    },
    Methoden: {
        ändereName() {
            dieser.name = "Lily"
        }
    }
</Skript>

Werte in Nachkommenkomponenten:

<Vorlage>
  <div Klasse="border2">
    <P>Name: {{parentObj.name}}</P>
  </div>
</Vorlage>
<Skript>
  Standard exportieren {
    injizieren: {
      übergeordnetesObjekt: {
        Standard: () => ({})
      }
    } // oder einfügen: ['parentObj']
  };
</Skript>

Hinweis: Diese Methode wird häufig bei Funktionskomponenten verwendet. Funktionale Komponenten sind zustandslos (keine Antwortdaten), nicht instanziiert (kein this-Kontext) und verfügen über keine Methoden zur Lebenszyklusverarbeitung. Daher weisen sie eine hohe Rendering-Leistung auf und eignen sich besser für Komponenten, die von externer Datenübertragung abhängen.

Zusammenfassen

Eltern-Kind-Kommunikation: Das übergeordnete Element übergibt Daten über Eigenschaften an das untergeordnete Element und das untergeordnete Element übergibt Daten über $emit an das übergeordnete Element. Kommunikation über $parent/$children. Mit $ref kann auch auf Komponenteninstanzen zugegriffen werden. Bereitstellung/Einfügung; $attrs/$listeners.

Brother-Kommunikation: EventBus; Vuex;

Kommunikation über verschiedene Ebenen: EventBus; Vuex; bereitstellen / einfügen; $attrs / $listeners;

Oben finden Sie eine ausführliche Erklärung, wie Vue-Komponenten Werte untereinander weitergeben. Weitere Informationen zu Vue finden Sie in den anderen verwandten Artikeln auf 123WORDPRESS.COM!