How to pass data between parent-child components under setup syntax sugar in vue3

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

First understand what parent-child components are

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

In Vue3, the parent component refers to a component containing one or more child components, which pass data and communication through props and events. Children components are components contained by the 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, and other tags such as<div>, <span>etc.

Father passes on to son

In Vue 3<script setup>In syntax sugar, the parent component passes data to the child component throughpropsaccomplish. The child component also receives data passed by the parent component through props.

Here is a simple example:

⭐⭐⭐Parent component: (file name)
html code

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

js code

<script setup>
import ChildComponent from './';
const message = 'Hello, Vue3!';
</script>

⭐⭐⭐Subcomponent: (file name is)
html code

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

js code

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

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.

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, it will not affect the original data.

Son passes to father

In Vue 3<script setup>In syntax sugar, the child component passes data to the parent component throughemitEvent implementation. The parent component also listens through the data transmitted by the child componentemitThe event is underway.

⭐⭐⭐Parent component: (file name)
html code

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

js code

<script setup>
import ChildComponent from './';
const message = 'Hello, Vue3!';
function handleUpdateMessage(newMessage) {
   = newMessage;
}
</script>

⭐⭐⭐Subcomponent: (file name is)
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', );
}
</script>

Similarly
In the child component, we first define the emits property and declare the event to be emitted named 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 for the update-message event emitted by the child component, and call a method called handleUpdateMessage() to update the parent component's message variable.

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 for this event, the passed value will be received in time and processed accordingly.

What are the ways of communication between components

In the vue framework, it is not only the parent-child component that can realize communication between components. To summarize, there are 4 types:

Parent-child component communication:
passpropsThe attribute passes data from the parent component to the child component, through$emitThe method triggers events and passes data to enable child components to communicate with the parent component.

Brother Component Communication:
A common parent component can be used as an intermediary and passed separately in the sibling components.$parentThe property accesses the parent component and passes data and event triggers through the parent component.

Cross-level ancestor descendant component communication:
Availableprovideandinjectto pass data across levels, or use event bus (event bus) and other methods to implement it.

Vuex State Manager: Vuex is a library dedicated to Vue application state management. It provides the state of all components of a centralized storage management application and provides some rules to ensure that state changes are predictable. Through the Vuex store instance, 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 a large number of complex interaction scenarios.

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

Generally, the most commonly used communications between father and son components and brother components. What is the difference between the two communications? You can also summarize 3 differences:

1. Communication between parent and child components is unidirectional, that is, the parent component passes data to the child component or the child component passes data to the parent component, while communication between brother components is bidirectional, that is, data can be passed between brother components.
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. Communication between parent and child components is usually relatively simple, suitable for simple interactions between components, while communication between sibling components is usually relatively complex, suitable for advanced interactions between components, such as linkage between multiple levels of components.

This is the article about how to pass data between parent and child components under setup syntax sugar in vue3. For more related content of data transmission of vue3 parent and child components, please search for my previous articles or continue browsing the related articles below. I hope everyone will support me in the future!