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.