How to transfer data between parent and child components under setup syntax sugar in vue3

First figure out what is a parent-child component

⭐Parent-child components, divided into parent components and child components.

In Vue3, a parent component refers to a component that contains one or more child components, which pass data and communicate through props and events. Child components are components contained by a parent component. They usually receive data from the parent component and render themselves based on this data. In Vue3, use <template>tags to define parent and child components, but you can also use other tags such as <div>, <span>etc.

---

father to son

In the syntactic sugar of Vue 3 <script setup>, parent components can pass data to child components through propsimplementation. The child component receives the data passed by the parent component through props.

Here is a simple example to illustrate:

⭐⭐⭐Parent component: (file name is ParentComponent.vue)
html code

<template>
  <div>
    <h1>{
   
   { message }}</h1>
    <ChildComponent :childMessage="message" />
  </div>
</template>

js code

<script setup>
import ChildComponent from './ChildComponent.vue';

const message = 'Hello, Vue3!';
</script>

---

⭐⭐⭐Child component: (file name is ChildComponent.vue)
html code

<template>
  <div>
    <h2>{
   
   { childMessage }}</h2>
  </div>
</template>

js code

<script setup props="['childMessage']">
</script>

In the parent component, we define a message variable and pass it as a prop to the child component. In the child component, we receive the childMessage variable passed by the parent component through declarative props and display it on the page.

In this way, the parent component can pass data to the child component. If you need to update the data, you can directly modify the message variable in the parent component. Since the child component receives a copy of the prop value, the original data will not be affected.

---

child's father

In Vue 3's <script setup>syntax sugar, child components can pass data to parent components through emitevents. The parent component receives the data passed by the child component by listening to emitthe event.

⭐⭐⭐Parent component: (file name is ParentComponent.vue)
html code

<template>
  <div>
    <h1>{
   
   { message }}</h1>
    <ChildComponent @update-message="handleUpdateMessage" />
  </div>
</template>

js code

<script setup>
import ChildComponent from './ChildComponent.vue';

const message = 'Hello, Vue3!';

function handleUpdateMessage(newMessage) {
    
    
  message.value = newMessage;
}
</script>

---

⭐⭐⭐Child component: (file name is ChildComponent.vue)
html code

<template>
  <div>
    <input v-model="childMessage" />
    <button @click="handleClick">Update Message</button>
  </div>
</template>

js code

<script setup props="['childMessage']" emits="update-message">
import {
    
     defineEmits } from 'vue';

const emit = defineEmits(['update-message']);

function handleClick() {
    
    
  emit('update-message', childMessage.value);
}
</script>

Similarly,
in the subcomponent, we first define the emits attribute and declare the event to be emitted as update-message. Then, in the function that handles the click event, we trigger the event through the emit() method, and pass the childMessage value bound in the input box as a parameter to the parent component.

In the parent component, we use @update-message to listen to the update-message event emitted by the child component, and call a method called handleUpdateMessage() to update the message variable of the parent component.

In this way, the child component can pass data to the parent component. If you need to update the data, you can pass the new value to the parent component through the emit event in the child component. Since the parent component listens to the event, it will receive the passed value in time and process it accordingly.

---

What are the ways to communicate between components

In the Vue framework, there are not only parent-child components that can realize communication between components. In summary, there are 4 types:

• Parent-child component communication: Pass data from the parent component to the child component
  through propsthe attribute , $emitand trigger the event and pass the data through the method to realize the communication between the child component and the parent component.
• Sibling component communication:
  You can use a common parent component as an intermediary, access the parent component through $parentattributes , and use the parent component for data transfer and event triggering.
• Cross-level ancestor and descendant component communication:
  You can use provideand injectto pass data across levels, or use event bus (event bus) to achieve it.
• Vuex state manager:Vuex is a library dedicated to state management in Vue applications. It provides a centralized store to manage the state of all components of the application and provides rules to ensure that state changes are predictable. Through the store instance of Vuex, different Vue components can share the same state, and changes to this state will be automatically monitored. Therefore, it is recommended to use Vuex for global state management in scenarios that require a large number of complex interactions.

---

The difference between parent-child component communication and sibling component communication

Generally, the most commonly used communication is the communication between parent-child components and sibling components. What is the difference between the two types of communication? It can also be concluded that there are 3 differences:

1. The communication between parent and child components is one-way, that is, the parent component transmits data to the child component or the child component transmits data to the parent component, while the communication between sibling components is two-way, that is, sibling components can transmit data to each other .
2. Communication between parent and child components usually uses props and custom events, while communication between sibling components usually uses Vue's global events or Vuex.
3. The communication between parent and child components is usually relatively simple and suitable for simple interactions between components, while the communication between sibling components is usually more complex and suitable for advanced interactions between components, such as linkage between multi-level components.

---