Sometimes, we want to communicate between sibling components in Vue.js.
In this article, we’ll look at how to communicate between sibling components in Vue.js.
How to communicate between sibling components in Vue.js?
To communicate between sibling components in Vue.js, we can emit event to the root component of the app with this.$root.$emit
.
For instance, we write
this.$root.$emit('event', data);
to emit the event
event from the first component.
Then in the 2nd component, we write
<script>
export default {
//...
mounted() {
this.$root.$on("event", (data) => {
console.log(data);
});
},
//...
};
</script>
to call this.$root.$on
to listen for the 'event'
event and get the data
that we called $emit
with from the callback parameter.
Conclusion
To communicate between sibling components in Vue.js, we can emit event to the root component of the app with this.$root.$emit
.