In-depth understanding of Vue 3 methods to implement component communication

In Vue 3, component communication is a key concept that allows us to pass data and events between components. This article will introduce several common Vue 3 component communication methods, includingprops、emits、provideandinject, event bus and Vuex state management.

1. Use props and emits for parent-child component communication

props pass data

propsIt is a mechanism for the parent component to pass data to the child component. In subcomponents, by definingpropsProperties to receive data passed by the parent component.

Parent component ():

<template>
  <ChildComponent :message="parentMessage" />
</template>
<script>
import ChildComponent from './';
export default {
  components: {
    ChildComponent
  },
  data() {
    return {
      parentMessage: 'Hello from Parent Component!'
    };
  }
};
</script>

Subcomponents ():

<template>
  <div>{{ message }}</div>
</template>
<script>
export default {
  props: {
    message: {
      type: String,
      required: true
    }
  }
};
</script>

emits pass events

Subcomponents can be passed$emitMethods send events to the parent component, thereby realizing the transfer of information from the child component to the parent component.

Subcomponents ():

<template>
  <button @click="sendMessage">Send Message</button>
</template>
<script>
export default {
  emits: ['messageSent'],
  methods: {
    sendMessage() {
      this.$emit('messageSent', 'Hello from Child Component!');
    }
  }
};
</script>

Parent component ():

<template>
  <ChildComponent @messageSent="handleMessage" />
</template>
<script>
import ChildComponent from './';
export default {
  components: {
    ChildComponent
  },
  methods: {
    handleMessage(message) {
      (message);
    }
  }
};
</script>

2. Use provide and inject to communicate with grandparents components

provideandinjectAllows communication between grandparent components and grandparent components without passing data through intermediate parent components.

Grandfather component ():

<template>
  <ParentComponent />
</template>
<script>
import ParentComponent from './';
export default {
  components: {
    ParentComponent
  },
  provide() {
    return {
      grandparentMessage: 'Hello from Grandparent Component!'
    };
  }
};
</script>

Sun component ():

<template>
  <div>{{ grandparentMessage }}</div>
</template>
<script>
export default {
  inject: ['grandparentMessage']
};
</script>

3. Use event bus for sibling components communication

Event bus is a common method for sibling components communication, and Vue instances are usually used as event bus.

Event Bus ():

import { reactive } from 'vue';
const eventBus = reactive({});
export default eventBus;

Component A ():

<template>
  <button @click="sendMessage">Send Message to Component B</button>
</template>
<script>
import eventBus from './';
export default {
  methods: {
    sendMessage() {
       = 'Hello from Component A!';
    }
  }
};
</script>

Component B ():

<template>
  <div>{{ message }}</div>
</template>
<script>
import { reactive, toRefs } from 'vue';
import eventBus from './';
export default {
  setup() {
    const state = reactive({
      message: ''
    });
     = ;
    return {
      ...toRefs(state)
    };
  }
};
</script>

This is the end of this article about in-depth understanding of Vue 3 Component Communication. For more related Vue 3 Component Communication content, please search for my previous articles or continue browsing the related articles below. I hope everyone will support me in the future!