What are the ways of component communication in vue2?

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 communication method.

1. 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>

2. 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 passed 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>

3. Sibling component communication (event bus, Vuex state management, shared parent component)#

There are several flexible ways to achieve sibling component communication, 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 pass data through a shared parent component, and 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.