In Vue applications, component communication can be achieved through multiple approaches, each suited for specific scenarios:

• Props and Custom Events: Parent components pass data to children via props; children emit custom events to send data back. This is the foundational pattern for parent-child interaction.
• Event Hub: A central empty Vue instance acts as an event bus, enabling communication between any two components through event emission and listening.
• Vuex: A state management pattern for centralized state sharing and mutation across all component in an application.
• Provide/Inject: Ancestor components supply data to descendants without explicit prop drilling through intermediate layers.
• $attrs and $listeners: Pass undeclared props and event listeners from parent to child, useful for higher-order components.
• Slots: Allow parent components to inject content into designated areas of child components for flexible composition.

Props and Custom Events

Parent components transmit data to children using props, while children communicate upward via emitted events. Below demonstrates this bidirectional flow:

Parent Component (AppParent.vue)

<template>
  <div class="parent-container">
    <h3>Parent View</h3>
    <AppChild :incoming-msg="parentMsg" @update-child-data="processChildData" />
    <p>Data from child: {{ childResponse }}</p>
  </div>
</template>

<script>
import AppChild from './AppChild.vue';

export default {
  components: { AppChild },
  data() {
    return {
      parentMsg: 'Initial data from parent',
      childResponse: ''
    };
  },
  methods: {
    processChildData(payload) {
      this.childResponse = payload;
    }
  }
};
</script>

Child Component (AppChild.vue)

<template>
  <div class="child-container">
    <h4>Child View</h4>
    <p>Received: {{ incomingMsg }}</p>
    <button @click="notifyParent">Transmit to Parent</button>
  </div>
</template>

<script>
export default {
  props: ['incomingMsg'],
  methods: {
    notifyParent() {
      this.$emit('update-child-data', 'Processed data from child');
    }
  }
};
</script>

Here, the parent passes parentMsg via prop incomingMsg. The child displays it and emits update-child-data with a payload when the button is clicked, which the parent handles to update childResponse.

Event Hub

An event hub uses a minimal Vue instance to facilitate cross-component communication. Components emit events to the hub, and others listen for these events.

Event Hub Setup (EventHub.js)

import { createApp } from 'vue';
export const EventHub = createApp({});

Sender Component (SenderComponent.vue)

<template>
  <button @click="dispatchData">Share Data</button>
</template>

<script>
import { EventHub } from './EventHub';

export default {
  methods: {
    dispatchData() {
      EventHub.config.globalProperties.$emit('data-from-sender', 'Greetings from Sender');
    }
  }
};
</script>

Receiver Component (ReceiverComponent.vue)

<template>
  <p>Incoming: {{ receivedData }}</p>
</template>

<script>
import { EventHub } from './EventHub';

export default {
  data() {
    return { receivedData: '' };
  },
  mounted() {
    EventHub.config.globalProperties.$on('data-from-sender', (payload) => {
      this.receivedData = payload;
    });
  },
  beforeUnmount() {
    EventHub.config.globalProperties.$off('data-from-sender');
  }
};
</script>

The sender triggers data-from-sender with a message; the receiver listens for this event and updates its state.

Vuex State Management

Vuex provides a centralized store for shared state. Below is a counter example:

Store Configuration (counterStore.js)

import { createStore } from 'vuex';

export default createStore({
  state: { tally: 0 },
  mutations: {
    addOne(state) { state.tally++; },
    subtractOne(state) { state.tally--; }
  },
  actions: {
    increment({ commit }) { commit('addOne'); },
    decrement({ commit }) { commit('subtractOne'); }
  },
  getters: {
    currentTally: (state) => state.tally
  }
});

Counter Display Component (CounterDisplay.vue)

<template>
  <div>
    <p>Current Value: {{ currentTally }}</p>
    <button @click="increase">Add</button>
    <button @click="decrease">Subtract</button>
  </div>
</template>

<script>
export default {
  computed: {
    currentTally() { return this.$store.getters.currentTally; }
  },
  methods: {
    increase() { this.$store.dispatch('increment'); },
    decrease() { this.$store.dispatch('decrement'); }
  }
};
</script>

The store manages tally state with mutations/actions. The component accesses the state via a getter and triggers actions to modify it.