Example of code to implement code that implements child components passing data to parent components in Vue3

Prospect introduction

In Vue3, it is a very common requirement for child components to pass data to parent components. Whether it is form data submission, event triggering or state change, data transfer between child components and parent components is part of implementing data linkage and maintaining application state. To achieve this, we do it mainly by customizing events.

Vue3 provides a new API to handle this process, i.e.defineEmits. With the help of this API, we can achieve data flow between components more elegantly and flexibly.

Sample code

Let's start from scratch with a concrete example, demonstrating how to implement child components passing data to parent components in Vue3.

Parent component

First, we create a parent component named：

<template>
  <div>
    <h1>Parent component</h1>
    <p>Data received from subcomponent：{{ receivedData }}</p>
    <ChildComponent @sendData="updateData" />
  </div>
</template>

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

const receivedData = ref('');

function updateData(data) {
   = data;
}
</script>

<style scoped>
/* Optional style part */
</style>

Code explanation

1. exist<template>Part, we display the data of the parent componentreceivedData, and customize eventssendDataTo receive data passed by subcomponents.
2. exist<script setup>Part of it, we introduced Vue3'srefTo create responsive variablesreceivedData。
3. updateDataMethod is used to update the received data.
4. We introduce and use subcomponentsChildComponent, monitor it at the same timesendDataEvent and callupdateDatamethod.

Subcomponents

Next, we create a subcomponent named：

<template>
  <div>
    <h2>Subcomponents</h2>
    <input v-model="inputData" placeholder="Please enter data">
    <button @click="sendDataToParent">Send data to parent component</button>
  </div>
</template>

<script setup>
import { ref, defineEmits } from 'vue';

const inputData = ref('');

const emit = defineEmits(['sendData']);

function sendDataToParent() {
  emit('sendData', );
}
</script>

<style scoped>
/* Optional style part */
</style>

Code explanation

1. exist<template>In section, we create an input box and a button.
2. exist<script setup>Part, userefResponsive variables were createdinputData, used to store data entered by the user.
3. passdefineEmitsDefinedsendDataevent.
4. sendDataToParentThe method will passemitThe function willinputDataThe value of the variable is sent to the parent component.

Complete project structure

To ensure that the sample code runs properly, the project file structure is as follows:

src/
├── components/
│   ├── 
│   └── 
├── 
└── 

Make sure to be inIntroduced and usedParentComponent：

<template>
  <ParentComponent />
</template>

<script setup>
import ParentComponent from './components/';
</script>

<style scoped>
/* Optional style part */
</style>

Finally, inSet the entire Vue application:

import { createApp } from 'vue';
import App from './';

createApp(App).mount('#app');

In-depth understanding

Through the above example, we implement a basic parent-child component data transfer. However, more complex scenarios may be encountered in actual development, such as multi-level component communication, global state management, etc. In these cases, Vuex or a more advanced state management tool may be a better choice.

Extension: Global Event Bus

Sometimes, using props and emit in complex component trees can be cumbersome, and a global event bus can be introduced to simplify data transfer. Although Vue3 no longer recommends this approach, as it may make the code difficult to maintain, it is still an effective solution.

Extension: Combined API

Vue3 also introduced a Composition API, which allows us to organize code logic more flexibly. Using a combined API can make the code more readable and reusable.

Extension: Provide / Inject

Another way of communication is to useprovideandinjectMethods, this can be very useful for certain specific data delivery scenarios, especially when you need to communicate across multiple levels.

Summarize

In Vue3, passing data between components is a basic and important skill. Whether it is through props and emit or more advanced state management tools, understanding and mastering these methods can make your development work smoother.

This is the introduction to this article about the code example of implementing child components to pass data to parent components in Vue3. For more related Vue3 subcomponents to pass data to parent components, please search for my previous articles or continue browsing the related articles below. I hope everyone will support me in the future!