Analyse des Datenaktualisierungsschemas in der Vue-Komponentenkommunikation

Analyse des Datenaktualisierungsschemas in der Vue-Komponentenkommunikation

In der Vue-Entwicklung spielt die Komponentenkommunikation eine entscheidende Rolle. Bei der Komponentenkommunikation ist die Datenaktualisierung ein wesentliches Bindeglied. In diesem Artikel wird das Datenaktualisierungsschema in der Vue-Komponentenkommunikation analysiert und anhand von Codebeispielen veranschaulicht.

1. Kommunikation zwischen übergeordneten und untergeordneten Komponenten

Bei der Kommunikation zwischen übergeordneten und untergeordneten Komponenten kann die übergeordnete Komponente Daten über Requisiten an die untergeordnete Komponente weitergeben, und die untergeordnete Komponente kann über das Ereignis $emit Daten an die übergeordnete Komponente senden.

Codebeispiel:

// Übergeordnete Komponente App.vue
d477f9ce7bf77f53fbcf36bec1b69b7a
dc6dce4a544fdca2df29d5ac0ea9906b

<child-component :message="message" @update="handleUpdate"></child-component>

16b28748ea4df4d9c2150843fecfba68
21c97d3a051048b8e55e3c8f199a54b2
3f1c4e4b6b16bbbd69b2ee476dc4f83a
import ChildComponent from './ ChildComponent.vue';

Standardexport {
Komponenten: {

ChildComponent

},
data() {

return {
  message: 'Hello World'
}

},
Methoden: {

handleUpdate(data) {
  this.message = data;
}

}
}
2cacc6d41bbb37262a98f745aa00fbf0

// Kind Component ChildComponent.vue
d477f9ce7bf77f53fbcf36bec1b69b7a
dc6dce4a544fdca2df29d5ac0ea9906b

<button @click="sendMessage">发送消息</button>

16b28748ea4df4d9c2150843fecfba68
21c97d3a051048b8e55e3c8f199a54b2
3f1c4e4b6b16bbbd69b2ee476dc4f83a
export default {
props: ['message'],
methoden: {

sendMessage() {
  this.$emit('update', 'Hello Vue');
}

}
}
2cacc6d41bbb37262a98f745aa00fbf0

In diesem Beispiel übergibt die übergeordnete Komponente das Nachrichtenattribut über Requisiten an die untergeordnete Komponente. Wenn die untergeordnete Komponente auf die Schaltfläche klickt, wird über das Ereignis $emit ein Aktualisierungsereignis an die übergeordnete Komponente gesendet und „Hello Vue“ als Daten übergeben. Nachdem die handleUpdate-Methode in der übergeordneten Komponente die Daten empfangen hat, weist sie sie der Nachricht zu und aktualisiert so die Daten.

2. Geschwisterkomponentenkommunikation

In der Geschwisterkomponentenkommunikation können Sie Daten in der gemeinsamen übergeordneten Komponente definieren und die Daten dann über Requisiten bzw. Ereignisse aktualisieren.

Codebeispiel:

// Übergeordnete Komponente App.vue
d477f9ce7bf77f53fbcf36bec1b69b7a
dc6dce4a544fdca2df29d5ac0ea9906b

<child-component1 :message="message" @update-message="handleUpdateMessage"></child-component1>
<child-component2 :message="message"></child-component2>

16b28748ea4df4d9c2150843fecfba68
21c97d3a051048b8e55e3c8f199a54b2
3f1c4e4b6b16bbbd69b2ee476dc4f83a
import ChildComponent1 from './ ChildComponent1.vue';
ChildComponent2 aus './ChildComponent2.vue' importieren;

Standard exportieren {
Komponenten: {

ChildComponent1,
ChildComponent2

},
data() {

return {
  message: 'Hello World'
}

},
Methoden: {

handleUpdateMessage(data) {
  this.message = data;
}

}
}
2cacc6d41bbb37262a98f745aa00fbf0

// Untergeordnete Komponente ChildComponent1.vue
d477f9ce7bf77f53fbcf36bec1b69b7a
dc6dce4a544fdca2df29d5ac0ea9906b

<button @click="sendMessage">发送消息</button>

16b28748ea4df4d9c2150843fecfba68
21c97d3a051048b8e55e3c8f199a54b2
3f1c4e4b6b16bbbd69b2ee476dc4f83a
Standardexport {
props: ['message'],
Methoden: {

sendMessage() {
  this.$emit('update-message', 'Hello Vue');
}

}
}
2cacc6d41bbb37262a98f745aa00fbf0

// Untergeordnete Komponente ChildComponent2.vue
d477f9ce7bf77f53fbcf36bec1b69b7a
dc6dce4a544fdca2df29d5ac0ea9906b

<p>{{ message }}</p>

21c97d3a051048b8e55e3c8f199a54b2
3f1c4e4b6b16bbbd69b2ee476dc4f83a
export default {
props: ['message']
}
2cacc6d41bbb37262a98f745aa00fbf0

In diesem Beispiel werden Nachrichtendaten in der übergeordneten Komponente App.vue definiert und übergab es an die beiden Unterkomponenten ChildComponent1 und ChildComponent2. Wenn ChildComponent1 auf die Schaltfläche klickt, wird über das Ereignis $emit ein Update-Message-Ereignis an die übergeordnete Komponente gesendet und „Hello Vue“ als Daten übergeben. Nachdem die Methode handleUpdateMessage in der übergeordneten Komponente die Daten empfangen hat, weist sie sie der Nachricht zu. Da ChildComponent2 auch an die Nachrichteneigenschaft gebunden ist, aktualisiert ChildComponent2 die Anzeige automatisch, wenn die Nachricht aktualisiert wird.

Zusammenfassung

Durch Requisiten und Ereignisse können wir Daten in der Vue-Komponentenkommunikation aktualisieren. Bei der Kommunikation zwischen übergeordneten und untergeordneten Komponenten übergibt die übergeordnete Komponente Daten über Requisiten an die untergeordnete Komponente, und die untergeordnete Komponente sendet über das Ereignis $emit eine Anforderung zum Aktualisieren von Daten an die übergeordnete Komponente. Bei der Kommunikation mit Geschwisterkomponenten können Sie Daten in der gemeinsamen übergeordneten Komponente definieren und die Daten dann über Requisiten und Ereignisse aktualisieren. Diese Datenaktualisierungslösungen wurden in der tatsächlichen Vue-Entwicklung häufig verwendet und helfen uns, die Komponentenkommunikation und Datenaktualisierungen besser zu implementieren.

Das obige ist der detaillierte Inhalt vonAnalyse des Datenaktualisierungsschemas in der Vue-Komponentenkommunikation. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!