[Medium] Komponentenkommunikation
1. What are the ways for Vue components to communicate with each other?
Welche Möglichkeiten gibt es für die Kommunikation zwischen Vue-Komponenten?
Die Datenübertragung zwischen Vue-Komponenten ist eine sehr häufige Anforderung in der Entwicklung. Je nach Beziehung zwischen den Komponenten stehen verschiedene Kommunikationsmethoden zur Verfügung.
Klassifizierung der Komponentenbeziehungen
Eltern-Kind: props / $emit
Großeltern-Enkel: provide / inject
Geschwister: Event Bus / Vuex / Pinia
Beliebige Komponenten: Vuex / Pinia
1. Props (Eltern an Kind)
Verwendung: Elternkomponente übergibt Daten an die Kindkomponente
<!-- ParentComponent.vue - Vue 3 <script setup> -->
<template>
<div>
<h1>Elternkomponente</h1>
<ChildComponent
:message="parentMessage"
:user="userInfo"
:count="counter"
/>
</div>
</template>
<script setup>
import { ref } from 'vue';
import ChildComponent from './ChildComponent.vue';
const parentMessage = ref('Hello from parent');
const userInfo = ref({
name: 'John',
age: 30,
});
const counter = ref(0);
</script>
<!-- ChildComponent.vue - Vue 3 <script setup> -->
<template>
<div>
<h2>Kindkomponente</h2>
<p>Empfangene Nachricht: {{ message }}</p>
<p>Benutzer: {{ user.name }} ({{ user.age }} Jahre)</p>
<p>Zähler: {{ count }}</p>
</div>
</template>
<script setup>
// Grundlegende Typvalidierung
defineProps({
message: {
type: String,
required: true,
default: '',
},
// Objekt-Typvalidierung
user: {
type: Object,
required: true,
default: () => ({}),
},
// Numerische Typvalidierung
count: {
type: Number,
default: 0,
validator: (value) => value >= 0, // Benutzerdefinierte Validierung: muss >= 0 sein
},
});
</script>
Hinweise zu Props
<!-- Vue 3 <script setup> Schreibweise -->
<script setup>
import { ref, onMounted } from 'vue';
const props = defineProps({
message: String,
});
const localMessage = ref(props.message);
onMounted(() => {
// Falsch: Props sollten nicht direkt modifiziert werden
// props.message = 'new value'; // Erzeugt eine Warnung
// Richtig: Props wurden oben bereits in ein ref kopiert
localMessage.value = props.message;
});
</script>
2. $emit (Kind an Eltern)
Verwendung: Kindkomponente sendet Events und Daten an die Elternkomponente
<!-- ChildComponent.vue - Vue 3 <script setup> -->
<template>
<div>
<button @click="sendToParent">An Eltern senden</button>
<input v-model="inputValue" @input="handleInput" />
</div>
</template>
<script setup>
import { ref } from 'vue';
const emit = defineEmits(['custom-event', 'update:modelValue']);
const inputValue = ref('');
const sendToParent = () => {
// Event an die Elternkomponente senden
emit('custom-event', {
message: 'Hello from child',
timestamp: Date.now(),
});
};
const handleInput = () => {
// Eingabewert in Echtzeit senden
emit('update:modelValue', inputValue.value);
};
</script>
<!-- ParentComponent.vue - Vue 3 <script setup> -->
<template>
<div>
<h1>Elternkomponente</h1>
<!-- Events der Kindkomponente abhören -->
<ChildComponent
@custom-event="handleCustomEvent"
@update:modelValue="handleUpdate"
/>
<p>Empfangene Daten: {{ receivedData }}</p>
</div>
</template>
<script setup>
import { ref } from 'vue';
import ChildComponent from './ChildComponent.vue';
const receivedData = ref(null);
const handleCustomEvent = (data) => {
console.log('Event vom Kind empfangen:', data);
receivedData.value = data;
};
const handleUpdate = (value) => {
console.log('Eingabewert aktualisiert:', value);
};
</script>
emits-Option in Vue 3
<!-- Vue 3 <script setup> Schreibweise -->
<script setup>
const emit = defineEmits({
// Events deklarieren, die gesendet werden
'custom-event': null,
// Event mit Validierung
'update:modelValue': (value) => {
if (typeof value !== 'string') {
console.warn('modelValue muss ein String sein');
return false;
}
return true;
},
});
const sendEvent = () => {
emit('custom-event', 'data');
};
</script>
3. v-model (Bidirektionale Bindung)
Verwendung: Bidirektionale Datenbindung zwischen Eltern- und Kindkomponenten
v-model in Vue 2
<!-- ParentComponent.vue -->
<template>
<custom-input v-model="message" />
<!-- Entspricht -->
<custom-input :value="message" @input="message = $event" />
</template>
<!-- CustomInput.vue (Vue 2) -->
<template>
<input :value="value" @input="$emit('input', $event.target.value)" />
</template>
<script>
export default {
props: ['value'],
};
</script>
v-model in Vue 3
<!-- ParentComponent.vue - Vue 3 <script setup> -->
<template>
<custom-input v-model="message" />
<!-- Entspricht -->
<custom-input :modelValue="message" @update:modelValue="message = $event" />
</template>
<script setup>
import { ref } from 'vue';
import CustomInput from './CustomInput.vue';
const message = ref('');
</script>
<!-- CustomInput.vue - Vue 3 <script setup> -->
<template>
<input :value="modelValue" @input="updateValue" />
</template>
<script setup>
defineProps({
modelValue: String,
});
const emit = defineEmits(['update:modelValue']);
const updateValue = (event) => {
emit('update:modelValue', event.target.value);
};
</script>
Mehrere v-model in Vue 3
<!-- ParentComponent.vue - Vue 3 <script setup> -->
<template>
<user-form v-model:name="userName" v-model:email="userEmail" />
</template>
<script setup>
import { ref } from 'vue';
import UserForm from './UserForm.vue';
const userName = ref('');
const userEmail = ref('');
</script>
<!-- UserForm.vue - Vue 3 <script setup> -->
<template>
<div>
<input
:value="name"
@input="$emit('update:name', $event.target.value)"
placeholder="Name"
/>
<input
:value="email"
@input="$emit('update:email', $event.target.value)"
placeholder="E-Mail"
/>
</div>
</template>
<script setup>
defineProps({
name: String,
email: String,
});
defineEmits(['update:name', 'update:email']);
</script>
4. Provide / Inject (Großeltern-Enkel-Komponenten)
Verwendung: Kommunikation über mehrere Ebenen hinweg, vermeidet schichtweises Weiterreichen von Props
<!-- GrandparentComponent.vue -->
<template>
<div>
<h1>Großelternkomponente</h1>
<parent-component />
</div>
</template>
<script>
import { ref, provide } from 'vue';
import ParentComponent from './ParentComponent.vue';
export default {
components: { ParentComponent },
setup() {
const userInfo = ref({
name: 'John',
role: 'admin',
});
const updateUser = (newInfo) => {
userInfo.value = { ...userInfo.value, ...newInfo };
};
// Daten und Methoden für Nachfahrenkomponenten bereitstellen
provide('userInfo', userInfo);
provide('updateUser', updateUser);
return { userInfo };
},
};
</script>
<!-- ParentComponent.vue -->
<template>
<div>
<h2>Elternkomponente (verwendet kein inject)</h2>
<child-component />
</div>
</template>
<script>
import ChildComponent from './ChildComponent.vue';
export default {
components: { ChildComponent },
};
</script>
<!-- ChildComponent.vue -->
<template>
<div>
<h3>Kindkomponente</h3>
<p>Benutzer: {{ userInfo.name }}</p>
<p>Rolle: {{ userInfo.role }}</p>
<button @click="changeUser">Benutzer ändern</button>
</div>
</template>
<script>
import { inject } from 'vue';
export default {
setup() {
// Daten der Großelternkomponente injizieren
const userInfo = inject('userInfo');
const updateUser = inject('updateUser');
const changeUser = () => {
updateUser({ name: 'Jane', role: 'user' });
};
return {
userInfo,
changeUser,
};
},
};
</script>
Hinweise zu Provide / Inject
<script>
import { ref, readonly, provide } from 'vue';
export default {
setup() {
const state = ref({ count: 0 });
// Falsch: Nachfahrenkomponenten können direkt ändern
provide('state', state);
// Richtig: Schreibgeschützte Daten und Änderungsmethoden bereitstellen
provide('state', readonly(state));
provide('updateState', (newState) => {
state.value = newState;
});
},
};
</script>
5. $refs (Eltern greift auf Kind zu)
Verwendung: Elternkomponente greift direkt auf Eigenschaften und Methoden der Kindkomponente zu
<!-- ParentComponent.vue -->
<template>
<div>
<child-component ref="childRef" />
<button @click="callChildMethod">Kind-Methode aufrufen</button>
</div>
</template>
<script>
import ChildComponent from './ChildComponent.vue';
export default {
components: { ChildComponent },
methods: {
callChildMethod() {
// Methode der Kindkomponente direkt aufrufen
this.$refs.childRef.someMethod();
// Auf Daten der Kindkomponente zugreifen
console.log(this.$refs.childRef.someData);
},
},
mounted() {
// $refs erst nach mounted zugreifbar
console.log(this.$refs.childRef);
},
};
</script>
<!-- ChildComponent.vue -->
<script>
export default {
data() {
return {
someData: 'Child data',
};
},
methods: {
someMethod() {
console.log('Methode der Kindkomponente wurde aufgerufen');
},
},
};
</script>
ref mit Composition API in Vue 3
<template>
<child-component ref="childRef" />
<button @click="callChild">Kindkomponente aufrufen</button>
</template>
<script setup>
import { ref } from 'vue';
import ChildComponent from './ChildComponent.vue';
const childRef = ref(null);
const callChild = () => {
childRef.value.someMethod();
};
</script>
6. $parent / $root (Kind greift auf Eltern zu)
Verwendung: Kindkomponente greift auf Eltern- oder Wurzelkomponente zu (nicht empfohlen)
<!-- ChildComponent.vue -->
<script>
export default {
mounted() {
// Auf Elternkomponente zugreifen
console.log(this.$parent.someData);
this.$parent.someMethod();
// Auf Wurzelkomponente zugreifen
console.log(this.$root.globalData);
},
};
</script>
Gründe, warum es nicht empfohlen wird:
- Erhöht die Kopplung zwischen Komponenten
- Datenfluss schwer nachverfolgbar
- Nachteilig für die Wiederverwendbarkeit von Komponenten
- Verwenden Sie stattdessen Props, $emit oder Provide/Inject
7. Event Bus (Beliebige Komponenten)
Verwendung: Kommunikation zwischen beliebigen Komponenten (in Vue 2 üblich, in Vue 3 nicht empfohlen)
Event Bus in Vue 2
// eventBus.js
import Vue from 'vue';
export const EventBus = new Vue();
<!-- ComponentA.vue -->
<script>
import { EventBus } from './eventBus';
export default {
methods: {
sendMessage() {
EventBus.$emit('message-sent', {
text: 'Hello',
from: 'ComponentA',
});
},
},
};
</script>
<!-- ComponentB.vue -->
<script>
import { EventBus } from './eventBus';
export default {
mounted() {
EventBus.$on('message-sent', (data) => {
console.log('Nachricht empfangen:', data);
});
},
beforeUnmount() {
// Listener entfernen nicht vergessen
EventBus.$off('message-sent');
},
};
</script>
Alternative in Vue 3: mitt
// eventBus.js
import mitt from 'mitt';
export const emitter = mitt();
<!-- ComponentA.vue -->
<script setup>
import { emitter } from './eventBus';
const sendMessage = () => {
emitter.emit('message-sent', {
text: 'Hello',
from: 'ComponentA',
});
};
</script>
<!-- ComponentB.vue -->
<script setup>
import { onMounted, onUnmounted } from 'vue';
import { emitter } from './eventBus';
const handleMessage = (data) => {
console.log('Nachricht empfangen:', data);
};
onMounted(() => {
emitter.on('message-sent', handleMessage);
});
onUnmounted(() => {
emitter.off('message-sent', handleMessage);
});
</script>
8. Vuex / Pinia (Globale Zustandsverwaltung)
Verwendung: Komplexen globalen Zustand verwalten
Pinia (Empfohlen für Vue 3)
// stores/user.js
import { defineStore } from 'pinia';
export const useUserStore = defineStore('user', {
state: () => ({
name: '',
email: '',
isLoggedIn: false,
}),
getters: {
fullInfo: (state) => `${state.name} (${state.email})`,
},
actions: {
login(name, email) {
this.name = name;
this.email = email;
this.isLoggedIn = true;
},
logout() {
this.name = '';
this.email = '';
this.isLoggedIn = false;
},
},
});
<!-- ComponentA.vue -->
<script setup>
import { useUserStore } from '@/stores/user';
const userStore = useUserStore();
const handleLogin = () => {
userStore.login('John', 'john@example.com');
};
</script>
<template>
<div>
<button @click="handleLogin">Anmelden</button>
</div>
</template>
<!-- ComponentB.vue -->
<script setup>
import { useUserStore } from '@/stores/user';
const userStore = useUserStore();
</script>
<template>
<div>
<p v-if="userStore.isLoggedIn">Willkommen, {{ userStore.fullInfo }}</p>
</div>
</template>
9. Slots (Inhaltsverteilung)
Verwendung: Elternkomponente übergibt Template-Inhalte an die Kindkomponente
Grundlegender Slot
<!-- ChildComponent.vue -->
<template>
<div class="card">
<header>
<slot name="header">Standardtitel</slot>
</header>
<main>
<slot>Standardinhalt</slot>
</main>
<footer>
<slot name="footer"></slot>
</footer>
</div>
</template>
<!-- ParentComponent.vue -->
<template>
<child-component>
<template #header>
<h1>Benutzerdefinierter Titel</h1>
</template>
<p>Dies ist der Hauptinhalt</p>
<template #footer>
<button>Bestätigen</button>
</template>
</child-component>
</template>
Scoped Slots (Slots mit Gültigkeitsbereich)
<!-- ListComponent.vue -->
<template>
<ul>
<li v-for="item in items" :key="item.id">
<!-- Daten an die Elternkomponente übergeben -->
<slot :item="item" :index="index"></slot>
</li>
</ul>
</template>
<script>
export default {
props: ['items'],
};
</script>
<!-- ParentComponent.vue -->
<template>
<list-component :items="users">
<!-- Von der Kindkomponente übergebene Daten empfangen -->
<template #default="{ item, index }">
<span>{{ index + 1 }}. {{ item.name }}</span>
</template>
</list-component>
</template>
Leitfaden zur Auswahl der Kommunikationsmethode
| Beziehung | Empfohlene Methode | Anwendungsfall |
|---|---|---|
| Eltern -> Kind | Props | Daten an Kind übergeben |
| Kind -> Eltern | $emit | Eltern über Events benachrichtigen |
| Eltern ↔ Kind | v-model | Bidirektionale Formularbindung |
| Großeltern -> Enkel | Provide/Inject | Ebenübergreifende Datenübertragung |
| Eltern -> Kind | $refs | Kind-Methoden direkt aufrufen (selten) |
| Beliebig | Pinia/Vuex | Globale Zustandsverwaltung |
| Beliebig | Event Bus | Einfache Eventkommunikation (nicht empfohlen) |
| Eltern -> Kind | Slots | Template-Inhalte übergeben |
Praxisbeispiel: Warenkorb-Funktionalität
<!-- App.vue -->
<template>
<div>
<!-- Pinia für globale Warenkorb-Zustandsverwaltung verwenden -->
<header-component />
<product-list />
<cart-component />
</div>
</template>
// stores/cart.js
import { defineStore } from 'pinia';
export const useCartStore = defineStore('cart', {
state: () => ({
items: [],
}),
getters: {
totalPrice: (state) => {
return state.items.reduce(
(sum, item) => sum + item.price * item.quantity,
0
);
},
itemCount: (state) => state.items.length,
},
actions: {
addItem(product) {
const existing = this.items.find((item) => item.id === product.id);
if (existing) {
existing.quantity++;
} else {
this.items.push({ ...product, quantity: 1 });
}
},
removeItem(productId) {
const index = this.items.findIndex((item) => item.id === productId);
if (index > -1) {
this.items.splice(index, 1);
}
},
},
});
<!-- ProductList.vue -->
<script setup>
import { useCartStore } from '@/stores/cart';
const cartStore = useCartStore();
const products = [
{ id: 1, name: 'iPhone', price: 30000 },
{ id: 2, name: 'iPad', price: 20000 },
];
const addToCart = (product) => {
cartStore.addItem(product);
};
</script>
<template>
<div>
<div v-for="product in products" :key="product.id">
<h3>{{ product.name }}</h3>
<p>${{ product.price }}</p>
<button @click="addToCart(product)">In den Warenkorb</button>
</div>
</div>
</template>
<!-- HeaderComponent.vue -->
<script setup>
import { useCartStore } from '@/stores/cart';
const cartStore = useCartStore();
</script>
<template>
<header>
<h1>Online-Shop</h1>
<div>Warenkorb: {{ cartStore.itemCount }} Artikel</div>
</header>
</template>
2. What's the difference between Props and Provide/Inject?
Was ist der Unterschied zwischen Props und Provide/Inject?
Props
Eigenschaften:
- Geeignet für direkte Eltern-Kind-Kommunikation
- Klarer Datenfluss
- Umfassende Typüberprüfung
- Bei tiefer Verschachtelung schichtweises Weiterreichen erforderlich (Props Drilling)
<!-- Schichtweises Weiterreichen erforderlich -->
<grandparent>
<parent :data="grandparentData">
<child :data="parentData">
<grandchild :data="childData" />
</child>
</parent>
</grandparent>
Provide/Inject
Eigenschaften:
- Geeignet für ebenübergreifende Kommunikation zwischen Großeltern und Enkeln
- Kein schichtweises Weiterreichen erforderlich
- Datenherkunft nicht offensichtlich
- Schwächere Typüberprüfung
<!-- Ebenübergreifende Übertragung, Zwischenschichten müssen nicht empfangen -->
<grandparent> <!-- provide -->
<parent> <!-- muss nicht behandeln -->
<child> <!-- muss nicht behandeln -->
<grandchild /> <!-- inject -->
</child>
</parent>
</grandparent>
Verwendungsempfehlungen
- Props verwenden: Eltern-Kind-Kommunikation, wenn der Datenfluss klar sein muss
- Provide/Inject verwenden: Tiefe Verschachtelung, Theme, Sprache, Authentifizierungsinformationen und andere globale Konfigurationen