In Vue 2 ist die Weitergabe von Daten zwischen Komponenten eine häufige Anforderung. In diesem Blog wird detailliert beschrieben, wie die Werteübertragung zwischen Komponenten in Vue 2 implementiert wird, und es wird anhand von Beispielen demonstriert, wie Daten mit Bildern übertragen werden.
Das Grundkonzept der Komponentenwertübergabe
In Vue 2 können übergeordnete Komponenten über die props-Eigenschaft Daten an untergeordnete Komponenten übergeben. Untergeordnete Komponenten erhalten diese Daten über Requisiten und können sie in ihren eigenen Vorlagen verwenden.
Übergeben Sie den Wert von der übergeordneten Komponente an die untergeordnete Komponente
Zuerst müssen wir eine übergeordnete Komponente erstellen, sagen wir, ihr Name ist ParentComponent. In dieser Komponente definieren wir die Daten, die an die untergeordneten Komponenten übergeben werden sollen.
<template>
<div>
<h2>父组件</h2>
<ChildComponent :message="message" :imageSrc="imageSrc" />
</div>
</template>
<script>
import ChildComponent from './ChildComponent.vue';
export default {
components: {
ChildComponent,
},
data() {
return {
message: 'Hello, 子组件!',
imageSrc: require('@/assets/image.jpg'), // 假设图片位于 assets 文件夹下
};
},
};
</script>
Im obigen Code konsumieren wir Daten :messageund :imageSrcübergeben sie an untergeordnete Komponenten. messageist ein Wert vom Typ string und imageSrcder Pfad einer Bildressource.
Als nächstes müssen wir eine untergeordnete Komponente erstellen ChildComponentund darin den von der übergeordneten Komponente übergebenen Wert empfangen.
<template>
<div>
<h3>子组件</h3>
<p>{
{ message }}</p>
<img :src="imageSrc" alt="图片" />
</div>
</template>
<script>
export default {
props: {
message: {
type: String,
required: true,
},
imageSrc: {
type: String,
required: true,
},
},
};
</script>
In untergeordneten Komponenten verwenden wir propsRequisiten, um empfangene Eigenschaften zu deklarieren und in der Vorlage anzuzeigen. Im obigen Code werden messageund imageSrcals Requisiten deklariert, wobei ihr Typ bzw. ihre Notwendigkeit angegeben wird.
messageWenn wir nun den Wert von und in der übergeordneten Komponente ändern imageSrc, wird die untergeordnete Komponente entsprechend aktualisiert.
Demo
Fügen wir nun die übergeordnete Komponente in die Hauptdatei ein und rendern sie:
<template>
<div id="app">
<ParentComponent />
</div>
</template>
<script>
import ParentComponent from './ParentComponent.vue';
export default {
components: {
ParentComponent,
},
};
</script>
Auf diese Weise haben wir ein einfaches Beispiel für die Übergabe von Vue-2-Komponentenwerten fertiggestellt, das eine übergeordnete Komponente und eine untergeordnete Komponente mit einem Bild enthält. Über :messageund :imageSrcübergibt die übergeordnete Komponente Daten an die untergeordnete Komponente und zeigt sie in der untergeordneten Komponente an.
Die untergeordnete Komponente sendet Ereignisse an die übergeordnete Komponente
Untergeordnete Komponenten können Daten oder Nachrichten an übergeordnete Komponenten senden, indem sie benutzerdefinierte Ereignisse auslösen. Die übergeordnete Komponente kann diese Ereignisse abhören und die Daten in der entsprechenden Verarbeitungsfunktion abrufen. Zum Beispiel:
// Child.vue
<template>
<div>
<button @click="sendMessage">Send Message</button>
</div>
</template>
<script>
export default {
methods: {
sendMessage() {
this.$emit('message-sent', 'Hello from child');
}
}
};
</script>
// Parent.vue
<template>
<div>
<Child @message-sent="handleMessage" />
</div>
</template>
<script>
import Child from './Child.vue';
export default {
components: {
Child
},
methods: {
handleMessage(message) {
console.log(message);
}
}
};
</script>
Kommunizieren Sie über einen Event-Bus
Wenn Ihre Anwendung über mehrere Komponenten verfügt, die kommunizieren müssen, können Sie den Ereignisbus von Vue verwenden, um die Kommunikation zu verwalten. Indem Sie eine leere Vue-Instanz als Ereignisbus erstellen und dann die Methoden ���� und emit und on in jeder Komponente verwenden, um Ereignisse auszulösen und abzuhören. Diese Methode eignet sich für die Kommunikation zwischen Komponenten, bei denen es sich nicht um eine Eltern-Kind-Beziehung handelt. Zum Beispiel:
// EventBus.js
import Vue from 'vue';
export default new Vue();
// Child1.vue
<template>
<div>
<button @click="sendMessage">Send Message</button>
</div>
</template>
<script>
import EventBus from './EventBus.js';
export default {
methods: {
sendMessage() {
EventBus.$emit('message-sent', 'Hello from child1');
}
}
};
</script>
// Child2.vue
<template>
<div>
<p>{
{ message }}</p>
</div>
</template>
<script>
import EventBus from './EventBus.js';
export default {
data() {
return {
message: ''
};
},
created() {
EventBus.$on('message-sent', (message) => {
this.message = message;
});
}
};
</script>
Zusammenfassen
Dieser Blog stellt das Grundkonzept der Wertübertragung zwischen Komponenten in Vue 2 vor und demonstriert anhand von Beispielen die Übertragung von Daten mit Bildern von übergeordneten Komponenten zu untergeordneten Komponenten. In der tatsächlichen Entwicklung können Sie den obigen Beispielcode nach Bedarf erweitern und ändern. Ich hoffe, dass dieser Artikel hilfreich ist, um die Wertübergabe von Vue 2-Komponenten zu verstehen!