Gängige Methoden der Vue-Komponentenbildung: Übertragung und Kommunikation von Komponentenwerten

Verwandte Wissenspunkte

• Übergeben von Werten von der übergeordneten Komponente an die untergeordnete Komponente
• Übergeben von Werten von untergeordneten Komponenten an übergeordnete Komponenten
• Übergeben von Werten zwischen Geschwisterkomponenten
• Weitergabe von Werten zwischen Vorfahren und Nachkommen
• Übergeben von Werten zwischen zwei beliebigen Komponenten

Übergeben von Werten von der übergeordneten Komponente an die untergeordnete Komponente

Es gibt drei grundlegende Methoden zum Übergeben von Werten von übergeordneten Komponenten an untergeordnete Komponenten:

• Requisiten
• Referenzen $refs
• $Kinder

In der täglichen Entwicklung verwenden wir Props und $refs häufiger und $children seltener (ich habe es kaum verwendet~).

Requisiten

Fügen Sie Eigenschaften in der übergeordneten Komponente hinzu und empfangen Sie sie in der untergeordneten Komponente, zum Beispiel:

Übergeordnete Komponente:

<HelloWorld msg="Willkommen bei Ihrer Vue.js-App" />

Unterkomponenten:

<h1>{{ msg }}</h1>

Requisiten: {
 msg: Zeichenfolge
}

Referenzen $refs

In der übergeordneten Komponente können Sie mit this.$refs.xxx die in der untergeordneten Komponente definierten Daten oder Methoden abrufen und verwenden.

Übergeordnete Komponente:

<HalloWelt ref="hw" />

montiert() {
 dies.$refs.hw.foo = "Leiste";
}

Unterkomponenten:

<p>{{ foo }}</p>

Daten() {
 zurückkehren {
 foo: "foo"
 };
}

Notiz:

this.$refs.xxx kann im erstellten Lebenszyklus nicht verwendet werden, da das echte DOM noch nicht gemountet wurde. Wenn Sie es wirklich möchten, können Sie vm.$nextTick verwenden, um auf das DOM zuzugreifen. Oder Sie können es so verstehen: Die übergeordnete Komponente wird vor der untergeordneten Komponente erstellt. Die untergeordnete Komponente wurde während des Erstellungslebenszyklus der übergeordneten Komponente nicht erstellt, sodass die untergeordnete Komponente nicht abgerufen werden kann.

In Vue ist die Aufrufreihenfolge im Komponentenlebenszyklus wie folgt:

Die Reihenfolge des Aufrufs der Komponenten ist zuerst übergeordnet, dann untergeordnet, und die Reihenfolge der Darstellung ist zuerst untergeordnet, dann übergeordnetes Element.

Der Zerstörungsvorgang der Komponente erfolgt zuerst für das übergeordnete Element und dann für das untergeordnete Element. Die Reihenfolge der Zerstörung ist: zuerst für das untergeordnete Element und dann für das übergeordnete Element.

Laden des Renderpasses

• Übergeordnetes Element vor Erstellen
• Übergeordnetes Element erstellt
• Übergeordnetes Element vor Mount
• Sub vorErstellen
• Sub erstellt
• Untergeordnet vor Mount
• Untermontiert
• Übergeordnet montiert

Aktualisierungsprozess für Unterkomponenten

• Übergeordnetes Element vorUpdate
• SubvorUpdate
• Sub aktualisiert
• Übergeordnetes Element aktualisiert

Aktualisierungsprozess für übergeordnete Komponenten

• Übergeordnetes Element vorUpdate
• Übergeordnetes Element aktualisiert

Zerstörungsprozess

• Übergeordnetes Element vor Zerstörung
• Kind vor Zerstören
• Kind zerstört
• Elternteil zerstört

erstellt() {
 console.log("erste Ausführung");
 console.log(this.$refs.hw); // undefiniert
 dies.$nextTick(() => {
 console.log("Die dritte Ausführung");
 console.log(this.$refs.hw); // kann zu diesem Zeitpunkt abgerufen werden});
}

montiert() {
 console.log("Zweite Ausführung");
 dies.$refs.hw.foo = "Leiste";
}

$Kinder

Übergeordnete Komponente:

dies.$children[0].xx = "xxx";

Notiz:

$children ruft die unmittelbaren untergeordneten Komponenten der aktuellen Instanz ab. Wenn in einer übergeordneten Komponente mehrere untergeordnete Komponenten vorhanden sind, beachten Sie bitte, dass $children keine Reihenfolge garantiert und nicht reagiert.

Übergeben von Werten von untergeordneten Komponenten an übergeordnete Komponenten

Die von untergeordneten Komponenten verwendete Methode zum Übergeben von Werten an übergeordnete Komponenten sind benutzerdefinierte Ereignisse. In untergeordneten Komponenten versendet und in übergeordneten Komponenten abgehört.

Hinweis: Der Ereignislistener ist derselbe wie der Ereignisdispatcher, wird jedoch in der übergeordneten Komponente deklariert.

Es gibt drei Situationen: keine Parameter, ein Parameter und mehrere Parameter.

Es werden keine Parameter übergeben

Unterkomponenten:

dies.$emit('childFoo');

Übergeordnete Komponente:

<HalloWelt2 @childFoo="onChildFoo"></HalloWelt2>

Methoden: {
 beiChildFoo() {
 console.log("====== onChildFoo =========");
 }
}

Übergeben eines Parameters

Verwenden Sie $event in der übergeordneten Komponente, um Parameter zu empfangen.

Unterkomponenten:

dies.$emit('childFooSingle', 'foo');

Übergeordnete Komponente:

<HalloWelt2 @childFooSingle="onChildFooSingle($event)"></HalloWelt2>

Methoden: {
 beiChildFooSingle(e) {
 console.log(e); // foo
 }
}

Übergeben mehrerer Parameter

Verwenden Sie Argumente in der übergeordneten Komponente, um Parameter zu erhalten, die in Form eines Arrays übergeben werden.

Unterkomponenten:

dies.$emit('childFooMultiple', 'foo', 'bar', 'dong');

Übergeordnete Komponente:

<HalloWelt2 @childFooSingle="onChildFooMultiple(arguments)"></HalloWelt2>

Methoden: {
 beiChildFooMultiple(msg) {
 konsole.log(msg[0]); // foo
 console.log(msg[1]); // Balken
 console.log(msg[2]); // dong
 }
}

Übergeben von Werten zwischen Geschwisterkomponenten

Werte können zwischen Geschwisterkomponenten über eine gemeinsame übergeordnete Komponente übergeben werden, beispielsweise $parent und $root.

Brother Komponente 1:

dies.$parent.$on('foo', handle);

Brother Komponente 2:

dies.$parent.$emit('foo');

Weitergabe von Werten zwischen Vorfahren und Nachkommen

Da es zu viele verschachtelte Komponenten gibt, ist es unpraktisch, sie mithilfe von Props zu übergeben. Vue stellt die API provide/inject bereit, um diese Aufgabe zu erledigen.

provide/inject ermöglicht es Vorfahren, Werte an Nachkommen weiterzugeben.

Vorfahren:

bieten() {
 Rückkehr {foo: 'foo'}
}

Nachkommen:

injizieren: ['foo']

Hinweis: provide und inject stellen hauptsächlich Anwendungsfälle für Komponenten/Komponentenbibliotheken auf hoher Ebene bereit. Es wird nicht empfohlen, sie direkt im Anwendungscode zu verwenden. Wir werden sie häufiger in Open-Source-Komponentenbibliotheken sehen. Möchte man allerdings, dass die Nachkommen Werte an die Vorfahren weitergeben, wird diese Lösung nicht funktionieren! ! !

Offizieller Tipp: Provide- und Inject-Bindungen reagieren nicht. Das war Absicht. Wenn Sie jedoch ein abhörbares Objekt übergeben, reagieren die Eigenschaften dieses Objekts weiterhin.

Vorfahren:

bieten() {
 zurückkehren {
 dong: dies.home
 };
},
Daten() {
 zurückkehren {
 home: ["App-Startseite"]
 };
}

Nachkommen:

spritzen: ["dong"]

this.dong = ["App-Daten"]; // Meldet einen Fehler. Vermeiden Sie die direkte Änderung eines eingefügten Werts, da die Änderungen bei jedem erneuten Rendern der bereitgestellten Komponente überschrieben werden.
this.dong.push("App-Daten"); // Kann erfolgreich geändert werden

Übergeben von Werten zwischen zwei beliebigen Komponenten

Es gibt zwei Lösungen für die Wertübergabe zwischen zwei beliebigen Komponenten: Eventbus und Vuex.

Ereignisbus

Erstellen Sie eine Bus-Klasse, die für die Ereignisverteilung, Überwachung und Rückrufverwaltung verantwortlich ist.

Erstellen Sie zunächst eine bus.js, importieren Sie sie in main.js und verwenden Sie sie dann in der Komponente:

Schritt 1: Erstellen Sie plugins/bus.js

Klasse Bus{
 Konstruktor(){
 diese.callbacks = {}
 }
 $auf(Name, Funktion){
 dies.callbacks[name] = dies.callbacks[name] || []
 dies.callbacks[name].push(fn)
 }
 $emit(Name, Argumente){
 wenn (diese.callbacks[name]) {
  dies.callbacks[name].forEach(cb => cb(args))
 }
 }
}

Standardbus exportieren;

Schritt 2: In main.js importieren

Bus aus "./plugins/bus" importieren;
Vue.prototype.$bus = neuer Bus()

Schritt 3: Verwendung in Komponenten

Komponente 1:

dies.$bus.$on('foo', Griff)

Komponente 2:

dies.$bus.$emit('foo')

Vuex

Erstellen Sie einen einzigartigen globalen Datenmanagerspeicher, um Daten zu verwalten und Komponenten über Statusänderungen zu benachrichtigen. Sie können sich zunächst selbst über das offizielle Dokument Vuex informieren. Später werde ich ein spezielles Thema zur detaillierten Verwendung schreiben ~

Zusammenfassen

Damit ist dieser Artikel über die gängigen Methoden der Vue-Komponentenbildung abgeschlossen: Übertragung und Kommunikation von Komponentenwerten. Weitere relevante Inhalte zur Übertragung und Kommunikation von Vue-Komponentenwerten finden Sie in den vorherigen Artikeln von 123WORDPRESS.COM oder in den folgenden verwandten Artikeln. Ich hoffe, dass jeder 123WORDPRESS.COM in Zukunft unterstützen wird!