Using an Event Bus to communicate across components

Using events you’re not limited to child-parent relationships.

You can use the so-called Event Bus.

We can emit an event on a generally accessible component.

this.$root, the root component, is usually used for this. All components can access it and use as a common ground.

You can also create a Vue component dedicated to this job, and import it where you need.

<script>
export default {
  name: 'Car',
  methods: {
    handleClick: function() {
      this.$root.$emit('clickedSomething')
    }
  }
}
</script>

Any other component can listen for this event. You can do so in the mounted callback:

<script>
export default {
  name: 'App',
  mounted() {
    this.$root.$on('clickedSomething', () => {
      //...
    })
  }
}
</script>