SoFunction
Updated on 2025-04-05

Summary of methods for implementing component communication in vue3

In Vue 3, there are several ways to enable communication between components. Here are some common methods:

1、Props and Events: The parent component passes data to the child component through props, and the child component sends a message to the parent component by triggering an event. This is the most basic way of communication in Vue

The data received by props is read-only

<!-- Parent component -->
<template>
  <ChildComponent :message="parentMessage" @childEvent="handleChildEvent" />
</template>
<script setup lang="ts">
import ChildComponent from './';
import {ref} from 'vue'
let parentMessage = ref('Hello from parent'),
const handleChildEvent = (payload) => {
      ('Received event from child:', payload);
}
</script>
<!-- Subcomponents -->
<template>
  <div>
    <p>{{  }}</p>
    <p>{{ message }}</p>
    <button @click="emitEvent">Send Event to Parent</button>
  </div>
</template>
<script setup lang="ts">
import {defineEmits} from 'vue'
const emit = defineEmits();
// Use defineProperty to receive data. DefineProperty does not need to be introduced to defineProps({}) or defineProps([]),// Props is a proxy object. Props can be omitted when used in templates, but cannot be omitted in jsconst props = defineProps({ message: String});
const emitEvent = () =>{
      $emit('childEvent', 'Hello from child');
}
</script>

2、Provide and Inject: This is a way to pass data across levels in the component tree. The ancestor components provide data through the provide option, and the descendants components receive data through the inject option.

// Ancestor componentexport default {
  provide() {
    return {
      sharedData: 'Shared data from ancestor',
    };
  },
};
// Descendant componentsexport default {
  inject: ['sharedData'],
};

3、Vuex:Vuex is a state management model specially developed for applications. It helps you manage shared state in your application and enable communication between components.

First, you need to install Vuex and configure it in your application:

npm install vuex@next --save

Then, create a Vuex store:

// 
import { createStore } from 'vuex';
export default createStore({
  state: {
    count: 0,
  },
  mutations: {
    increment(state) {
      ++;
    },
  },
});

Use store in your application:

// 
import { createApp } from 'vue';
import App from './';
import store from './store';
createApp(App).use(store).mount('#app');

Now you can use it in the componentthis.$storeAccess the store and update the status by submitting mutation or dispatching action.

<!-- Components -->
<template>
  <div>
    <p>{{ $ }}</p>
    <button @click="$('increment')">Increment</button>
  </div>
</template>

These methods can be chosen based on your needs and the complexity of your application. For simple component communication, Props and Events are usually sufficient. For more complex applications, you may want to consider using Provide/Inject or Vuex.

4. Similar to eventBus plug-in mitt in vue2 to implement global communication

This is the end of this article about the method of implementing component communication in vue3. For more related content on vue3 component communication, please search for my previous articles or continue browsing the related articles below. I hope everyone will support me in the future!