In Vue 2, there are several common ways to communicate between components, including:
- Parent-child component communication (props and events)
- Child-parent component communication (events and $emit)
- Sibling component communication (event bus, Vuex state management, shared parent component)
Below, I will provide a code example for each of these methods.
- Parent-child component communication (props and events)
The parent component passes data to the child component through props, and the child component can communicate with the parent component by triggering events using $emit.
Parent component:
<template>
<div>
<child-component :message="parentMessage" @update="handleUpdate"></child-component>
</div>
</template>
<script>
import ChildComponent from './ChildComponent.vue';
export default {
components: {
ChildComponent
},
data() {
return {
parentMessage: 'Hello from parent'
};
},
methods: {
handleUpdate(newMessage) {
console.log('Received message from child:', newMessage);
}
}
};
</script>
Child component:
<template>
<div>
<p>{{ message }}</p>
<button @click="sendMessage">Send Message</button>
</div>
</template>
<script>
export default {
props: ['message'],
methods: {
sendMessage() {
const newMessage = 'Hello from child';
this.$emit('update', newMessage);
}
}
};
</script>
- Child-parent component communication (events and $emit)
The child component triggers an event using $emit, and the parent component listens to that event to receive data from the child component.
Parent component:
<template>
<div>
<child-component @custom-event="handleCustomEvent"></child-component>
</div>
</template>
<script>
import ChildComponent from './ChildComponent.vue';
export default {
components: {
ChildComponent
},
methods: {
handleCustomEvent(data) {
console.log('Received data from child:', data);
}
}
};
</script>
Child component:
<template>
<div>
<button @click="sendData">Send Data</button>
</div>
</template>
<script>
export default {
methods: {
sendData() {
const data = { message: 'Hello from child' };
this.$emit('custom-event', data);
}
}
};
</script>
- Sibling component communication (event bus, Vuex state management, shared parent component)
There are several flexible ways to communicate between sibling components, including using an event bus, Vuex state management, or a shared parent component.
Event bus:
Create an event bus instance, and sibling components can use this instance to publish and subscribe to events.
// EventBus.js
import Vue from 'vue';
export const EventBus = new Vue();
Sibling component:
<template>
<div>
<button @click="publishEvent">Publish Event</button>
</div>
</template>
<script>
import { EventBus } from './EventBus.js';
export default {
methods: {
publishEvent() {
const eventData = { message: 'Hello from sibling' };
EventBus.$emit('custom-event', eventData);
}
}
};
</script>
Vuex state management:
Use Vuex to manage shared state, and sibling components can communicate by modifying and accessing the shared state.
// store.js
import Vue from 'vue';
import Vuex from 'vuex';
Vue.use(Vuex);
export default new Vuex.Store({
state: {
sharedMessage: ''
},
mutations: {
updateSharedMessage(state, newMessage) {
state.sharedMessage = newMessage;
}
},
actions: {
updateSharedMessage({ commit }, newMessage) {
commit('updateSharedMessage', newMessage);
}
},
getters: {
getSharedMessage(state) {
return state.sharedMessage;
}
}
});
Sibling component:
<template>
<div>
<button @click="updateMessage">Update Message</button>
</div>
</template>
<script>
import { mapActions } from 'vuex';
export default {
methods: {
...mapActions(['updateSharedMessage']),
updateMessage() {
const newMessage = 'Hello from sibling';
this.updateSharedMessage(newMessage);
}
}
};
</script>
Shared parent component:
Sibling components communicate by passing data through a shared parent component, where the parent component passes the data as props to the sibling components.
Shared parent component:
<template>
<div>
<child-component :sharedMessage="sharedMessage"></child-component>
</div>
</template>
<script>
import ChildComponent from './ChildComponent.vue';
export default {
components: {
ChildComponent
},
data() {
return {
sharedMessage: ''
};
},
methods: {
updateSharedMessage(newMessage) {
this.sharedMessage = newMessage;
}
}
};
</script>
Sibling component:
<template>
<div>
<p>{{ sharedMessage }}</p>
<button @click="updateMessage">Update Message</button>
</div>
</template>
<script>
export default {
props: ['sharedMessage'],
methods: {
updateMessage() {
const newMessage = 'Hello from sibling';
this.$emit('update-message', newMessage);
}
}
};
</script>
These are code examples for common component communication methods in Vue 2.