Vorwort: Vue2 verfügt über viele Methoden zum Übergeben von Werten zwischen Komponenten, sei es ein Interview oder eine tägliche Entwicklung. Die häufigste Methode ist jedoch die Werteübergabe zwischen übergeordneten und untergeordneten Komponenten.
1. Wert vom Elternteil an das Kind übergeben
Verwenden Sie in der übergeordneten Komponente die Bezeichnung der untergeordneten Komponente und übergeben Sie die Daten über Requisiten an die untergeordnete Komponente.
Definieren Sie in der untergeordneten Komponente die Option props, um die von der übergeordneten Komponente übergebenen Daten zu empfangen.
Die Daten der übergeordneten Komponente werden über die Option props an die untergeordnete Komponente übergeben, und die untergeordnete Komponente kann die Daten direkt verwenden.
übergeordnete Komponente:
<template>
<div>
<child-component :message="parentMessage" />
</div>
</template>
<script>
import ChildComponent from './ChildComponent.vue';
export default {
data() {
return {
parentMessage: 'Hello from parent component',
};
},
components: {
ChildComponent,
},
};
</script>
Unterbaugruppe:
<template>
<div>
<p>{
{ message }}</p>
</div>
</template>
<script>
export default {
props: {
message: {
type: String,
required: true,
},
},
};
</script>
Im obigen Beispiel hat die übergeordnete Komponente die Daten parentMessage über die Eigenschaft: message an die untergeordnete Komponente übergeben. Die untergeordnete Komponente definiert über die Option props eine Eigenschaft namens message, empfängt die von der übergeordneten Komponente übergebenen Daten und zeigt sie in der Vorlage an.
2. Übergeben Sie den Wert vom untergeordneten Element an das übergeordnete Element
Lösen Sie in der untergeordneten Komponente ein benutzerdefiniertes Ereignis über die Methode $emit aus und übergeben Sie die zu übergebenden Daten an die übergeordnete Komponente.
Überwachen Sie in der übergeordneten Komponente das von der untergeordneten Komponente ausgelöste Ereignis über die v-on-Anweisung und führen Sie bei Auslösung die entsprechende Methode aus, um die übergebenen Daten abzurufen.
Unterbaugruppe:
<template>
<div>
<button @click="sendMessage">Send Message</button>
</div>
</template>
<script>
export default {
methods: {
sendMessage() {
this.$emit('message-sent', 'Hello from child component');
},
},
};
</script>
übergeordnete Komponente:
<template>
<div>
<child-component @message-sent="handleMessage" />
<p>{
{ receivedMessage }}</p>
</div>
</template>
<script>
import ChildComponent from './ChildComponent.vue';
export default {
data() {
return {
receivedMessage: '',
};
},
components: {
ChildComponent,
},
methods: {
handleMessage(message) {
this.receivedMessage = message;
},
},
};
</script>
Im obigen Beispiel löst die untergeordnete Komponente die sendMessage-Methode aus, indem sie auf die Schaltfläche klickt, und löst über die this.$emit-Methode ein Ereignis namens message-sent aus und übergibt die Daten, die als Parameter an die übergeordnete Komponente übergeben werden sollen. Die übergeordnete Komponente überwacht das von der untergeordneten Komponente ausgelöste Ereignis über @message-sent und führt bei Auslösung die handleMessage-Methode aus, ruft die übergebenen Daten ab und weist sie der empfangenen Nachricht zu.
In einer übergeordneten Komponente .synckönnen Modifikatoren verwendet werden, um eine Variable an eine Eigenschaft einer untergeordneten Komponente zu binden. Wenn die untergeordnete Komponente diese Eigenschaft ändert, wird die Variable der übergeordneten Komponente entsprechend aktualisiert; und wenn die übergeordnete Komponente diese Variable ändert, wird die Eigenschaft der untergeordneten Komponente entsprechend aktualisiert.
Hier ist ein .syncBeispiel für die Verwendung von Modifikatoren:
übergeordnete Komponente:
<template>
<div>
<child-component :message.sync="parentMessage" />
<p>Parent Message: {
{ parentMessage }}</p>
</div>
</template>
<script>
import ChildComponent from './ChildComponent.vue';
export default {
data() {
return {
parentMessage: 'Hello from parent component',
};
},
components: {
ChildComponent,
},
};
</script>
Unterbaugruppe:
<template>
<div>
<input type="text" v-model="message" />
</div>
</template>
<script>
export default {
props: {
message: {
type: String,
required: true,
},
},
};
</script>
Im obigen Beispiel verwendet die übergeordnete Komponente die bidirektionale Bindung der Eigenschaften :message.syncder übergeordneten Komponente parentMessageund der untergeordneten Komponente . messageAnweisungen werden in Unterkomponenten verwendet , um v-modelden Wert des Eingabefelds an die Eigenschaft messagezu binden .
Wenn nun eine untergeordnete Komponente messageeine Eigenschaft ändert, parentMessagewerden die Eigenschaften der übergeordneten Komponente entsprechend aktualisiert; und wenn die übergeordnete Komponente sich ändert parentMessage, wird die Eigenschaft der untergeordneten Komponente messageentsprechend aktualisiert.
Es ist zu beachten, dass bei .syncVerwendung eines Modifikators zum Binden einer Eigenschaft die untergeordnete Komponente $emitüber die Methode ein benutzerdefiniertes Ereignis auslösen muss, um die übergeordnete Komponente über die Eigenschaftsaktualisierung zu informieren. Im obigen Beispiel $emit('update:message', newValue)aktualisiert die untergeordnete Komponente messagedie Eigenschaft über .
Die Verwendung .syncvon Modifikatoren kann den Prozess der bidirektionalen Datenbindung zwischen übergeordneten und untergeordneten Komponenten vereinfachen und den Code prägnanter und verständlicher machen. Da die Verwendung .syncvon Modifikatoren jedoch eine verborgene Logik einführt, müssen sie sorgfältig geprüft und in geeigneten Szenarien verwendet werden.