Kommunikation zwischen Vue-Komponenten
Die Kommunikation zwischen Vue-Komponenten kann in die folgenden Kategorien unterteilt werden:
Kommunikation zwischen Eltern-Kind-Komponenten
Die übergeordnete Komponente übergibt Daten über Requisiten an die untergeordnete Komponente, und die untergeordnete Komponente sendet über das Ereignis $emit Nachrichten an die übergeordnete Komponente.
Diese beiden Methoden sind die am häufigsten verwendeten Methoden zur Implementierung der Eltern-Kind-Kommunikation.
Diese Eltern-Kind-Kommunikationsmethode ist ein typischer einseitiger Datenfluss . Die übergeordnete Komponente leitet Daten über Requisiten weiter. Die untergeordnete Komponente kann die Requisiten nicht direkt ändern, sondern muss die übergeordnete Komponente durch Senden von Ereignissen informieren, um die Daten zu ändern.
Darüber hinaus können diese beiden Methoden auch direkt mithilfe des syntaktischen Zucker-V-Modells implementiert werden, da das V-Modell standardmäßig in eine Requisite mit dem Namen „Value“ und ein Ereignis mit dem Namen „Input“ analysiert wird.
Bei dieser Syntaxzuckermethode handelt es sich um eine typische bidirektionale Bindung, die oft bei UI-Steuerelementen verwendet wird, aber letztendlich ermöglicht sie der übergeordneten Komponente immer noch, Daten durch Ereignisse zu ändern.
Natürlich können wir auch über den Zugriff $parentoder das Objekt $childrenauf die Methoden und Daten in der Komponenteninstanz zugreifen
.
Beispielcode:
// Parent.vue
<template>
<div>
<Child :message="message" @update="handleUpdate" />
</div>
</template>
<script>
import Child from './Child.vue';
export default {
data() {
return {
message: 'Hello, child component!'
}
},
methods: {
handleUpdate(newMessage) {
this.message = newMessage;
}
},
components: {
Child
}
}
</script>
// Child.vue
<template>
<div>
<p>{
{ message }}</p>
<button @click="sendMessage">Send Message</button>
</div>
</template>
<script>
export default {
props: ['message'],
methods: {
sendMessage() {
this.$emit('update', 'New message from child component!');
}
}
}
</script>
Kommunikation zwischen Geschwisterkomponenten
Verwenden Sie eine gemeinsam genutzte Vue-Instanz oder einen gemeinsamen Ereignisbus für die Kommunikation zwischen Geschwisterkomponenten.
Diese Situation kann durch die Suche nach untergeordneten Komponenten in der übergeordneten Komponente erreicht werden. Das heißt
this.$parent.$children, in $children können Sie die erforderliche Komponenteninstanz über den Komponentennamen abfragen und dann kommunizieren.
Beispielcode:
// EventBus.js
import Vue from 'vue';
export const EventBus = new Vue();
// ComponentA.vue
<template>
<div>
<button @click="sendMessage">Send Message to Component B</button>
</div>
</template>
<script>
import { EventBus } from './EventBus.js';
export default {
methods: {
sendMessage() {
EventBus.$emit('message', 'Hello, Component B!');
}
}
}
</script>
// ComponentB.vue
<template>
<div>
<p>{
{ message }}</p>
</div>
</template>
<script>
import { EventBus } from './EventBus.js';
export default {
data() {
return {
message: ''
}
},
mounted() {
EventBus.$on('message', (msg) => {
this.message = msg;
});
}
}
</script>
Kommunizieren Sie über mehrere Komponentenebenen hinweg
In dieser Situation können Sie die neue API Provide/Inject in Vue 2.2 verwenden . Obwohl das Dokument nicht die direkte Verwendung im Geschäftsleben empfiehlt, ist sie bei guter Verwendung dennoch sehr nützlich.
Verwendung von Vuex für die Komponentenkommunikation
Vuex ist die offiziell von Vue bereitgestellte Zustandsverwaltungsbibliothek, die Daten zwischen verschiedenen Komponenten austauschen und ändern kann.
Beispielcode:
// store.js
import Vue from 'vue';
import Vuex from 'vuex';
Vue.use(Vuex);
export default new Vuex.Store({
state: {
message: 'Hello, Vuex!'
},
mutations: {
updateMessage(state, newMessage) {
state.message = newMessage;
}
},
actions: {
updateMessage({
commit }, newMessage) {
commit('updateMessage', newMessage);
}
}
});
// ComponentA.vue
<template>
<div>
<p>{
{
message }}</p>
<button @click="sendMessage">Send Message to Component B</button>
</div>
</template>
<script>
import {
mapActions, mapState } from 'vuex';
export default {
computed: {
...mapState(['message'])
},
methods: {
...mapActions(['updateMessage']),
sendMessage() {
this.updateMessage('New message from Component A!');
}
}
}
</script>
// ComponentB.vue
<template>
<div>
<p>{
{
message }}</p>
</div>
</template>
<script>
import {
mapState } from 'vuex';
export default {
computed: {
...mapState(['message'])
}
}
</script>
Dies sind verschiedene Klassifizierungen und Lösungen für die Kommunikation zwischen Vue-Komponenten. Sie können die geeignete Methode für die Kommunikation zwischen Komponenten entsprechend den tatsächlichen Anforderungen auswählen.
Für weitere Details suchen Sie bitte auf WeChat nach „ 前端爱好者“ und klicken Sie auf „Ich“, um es anzuzeigen .
Die ultimative Lösung für alle Kommunikationsprobleme
Solange Sie keine Angst vor Ärger haben, können Sie alle oben genannten Kommunikationssituationen mit Vuex oder Event Bus lösen.
Expandieren
Warum gibt es in Vue einen einseitigen Datenfluss?
Der Grund für die Verwendung des unidirektionalen Datenflusses in Vue besteht darin, die Rückverfolgbarkeit und Wartbarkeit der Daten sicherzustellen und die durch Datenänderungen verursachten Nebenwirkungen zu reduzieren .
Hier sind einige der Vorteile der Einführung eines unidirektionalen Datenflusses durch Vue:
-
Leicht zu verstehen: Im unidirektionalen Datenflussmodell können Daten nur über Requisiten von der übergeordneten Komponente an die untergeordnete Komponente übergeben werden, und in der untergeordneten Komponente können Daten nur durch Ereignisauslösung an die übergeordnete Komponente zurückgegeben werden. Diese klare Richtung des Datenflusses erleichtert das Verständnis und das Debuggen des Codes.
-
Responsive Aktualisierung: Das unidirektionale Datenflussmodell ermöglicht es Vue, Datenänderungen besser zu verfolgen und die Ansicht automatisch zu aktualisieren. Wenn sich Daten ändern, erkennt Vue die Änderung und aktualisiert die zugehörigen Komponenten, um die Synchronisierung von Daten und Ansichten sicherzustellen.
-
Datenvorhersagbarkeit: Das Einweg-Datenflussmodell macht den Datenfluss deutlich sichtbar. Jede Komponente kann nur ihre eigenen Daten ändern und die Daten anderer Komponenten nicht direkt ändern. Diese Einschränkung gewährleistet die Vorhersagbarkeit der Daten und reduziert potenzielle Datenkonflikte und Fehler.
-
Komponentenunabhängigkeit: Da Daten nur durch die Weitergabe von Requisiten und das Auslösen von Ereignissen kommuniziert werden können, sind Abhängigkeiten zwischen Komponenten klarer und isolierter. Dadurch werden Komponenten unabhängiger, wiederverwendbar und einfacher zu testen und zu warten.
Obwohl das unidirektionale Datenflussmodell einige Einschränkungen aufweist, kann es in den allermeisten Fällen die Anforderungen der Front-End-Entwicklung erfüllen und bietet eine bessere Wartbarkeit und Vorhersagbarkeit.
Wenn Sie den Zustand zwischen verschiedenen Komponenten teilen oder eine komplexere Datenflussverwaltung implementieren müssen, können Sie zur Unterstützung spezielle Zustandsverwaltungsbibliotheken wie Vuex verwenden.
Einseitiger Datenfluss und bidirektionale Datenbindung in Vue
Einseitiger Datenfluss und bidirektionale Datenbindung in Vue sind zwei wichtige Konzepte von Vue.
-
Einseitiger Datenfluss: In Vue ist der Datenfluss einseitig, dh Daten können nur von der übergeordneten Komponente zur untergeordneten Komponente fließen und die untergeordnete Komponente kann die Daten der übergeordneten Komponente nicht direkt ändern kann nur indirekt durch Auslösen der von der übergeordneten Komponente übergebenen Funktion erfolgen. Änderungen implementieren. Diese Datenflussmethode kann die Steuerbarkeit von Daten sicherstellen, verhindern, dass untergeordnete Komponenten willkürliche Änderungen an den Daten der übergeordneten Komponenten vornehmen, und außerdem die Schwierigkeit beim Debuggen verringern.
-
Zwei-Wege-Datenbindung: In Vue ist die Datenbindung bidirektional, dh wenn sich die Daten ändern, wird auch die Ansicht aktualisiert, und wenn sich die Ansicht ändert, werden auch die Daten aktualisiert. Dieser bidirektionale Bindungsmechanismus kann eine Echtzeitsynchronisierung von Ansichten und Daten erreichen und erleichtert Entwicklern die Interaktion mit Benutzeroberflächen und Daten.
In Vue kann eine bidirektionale Datenbindung mithilfe des V-Modells erreicht werden. Die V-Model-Direktive kann den Wert des Formularelements an die Daten der Vue-Instanz binden. Wenn der Benutzer Inhalte in das Formularelement eingibt, werden auch die Daten der Vue-Instanz entsprechend aktualisiert. Wenn sich gleichzeitig die Daten der Vue-Instanz ändern, werden auch die Formularelemente entsprechend aktualisiert.
Kurz gesagt, einseitiger Datenfluss und bidirektionale Datenbindung sind zwei Kernkonzepte von Vue, die zusammen den effizienten datengesteuerten Ansichtsmechanismus von Vue bilden.