How to Update Parent Data from Child Component in VueJS?
Last Updated :
11 Sep, 2024
In Vue.js, communication between components is essential for building dynamic applications. One common scenario is updating the parent component's data from a child component. we will cover several ways to achieve this, including custom events, and v-model. Updating parent data from a child component allows the parent to react to changes in the child component. Vue.js offers various mechanisms to manage this communication efficiently, making it easier to maintain and scale applications.
These are the following ways to Update Parent Data from Child Component in VueJS:
Steps to Create the Vue.js Application
Step 1: Install Vue CLI
npm install -g @vue/cli
Step 2: Create a New Vue Project
vue create parent-child-communication-gfg-nikunj
Step 3: Navigate to the Project Directory
cd parent-child-communication-gfg-nikunj
Step 4: Run the Project
npm run serve
Project Structure:
Project structureUpdated Dependencies:
{
"dependencies": {
"core-js": "^3.6.5",
"vue": "^2.6.11"
},
"devDependencies": {
"@vue/cli-plugin-babel": "~4.5.0",
"@vue/cli-service": "~4.5.0",
"babel-eslint": "^10.1.0"
}
}Using Custom Events
One of the most common ways to update parent data from a child component is through custom events. Vue allows a child component to emit events that the parent can listen for, which is ideal when the child component needs to send data back to the parent. In the child component, you emit an event using the $emit method, and in the parent component, you listen for the event using v-on or @ shorthand.
Example: This example demonstrates how the parent component updates its parentMessage data when the child component emits an event.
JavaScript
<script>
import ChildComponent from './ChildComponent.vue';
export default {
data() {
return {
parentMessage: '',
};
},
methods: {
handleUpdate(message) {
this.parentMessage = message;
},
},
components: {
ChildComponent,
},
};
// Contributed by Nikunj Sonigara
</script>
<template>
<div>
<h1>Parent Component</h1>
<p>Message from child: {{ parentMessage }}</p>
<ChildComponent @updateMessage="handleUpdate" />
</div>
</template>
<script>
export default {
data() {
return {
childMessage: '',
};
},
methods: {
sendUpdate() {
this.$emit('updateMessage', this.childMessage);
},
},
};
</script>
<template>
<div>
<h2>Child Component</h2>
<input type="text" v-model="childMessage" />
<button @click="sendUpdate">Send to Parent</button>
</div>
</template>
Output:
Using Custom EventsUsing v-model Directive
The v-model directive in Vue is commonly used for two-way data binding with form inputs. It can also be used between a parent and child component to establish two-way binding for any prop. This approach allows the parent to pass data to the child and the child to update the data directly. In the parent component, you bind the v-model directive to a variable. The child component will receive the prop (modelValue) and emit an update:modelValue event when the data changes.
Example: This example demonstrates how the parent component’s data is updated in real time as the child component modifies the bound value through v-model.
JavaScript
<script>
import ChildComponent from './ChildComponent.vue';
export default {
data() {
return {
parentMessage: '',
};
},
components: {
ChildComponent,
},
};
</script>
<template>
<div>
<h1>Parent Component</h1>
<p>Message from child: {{ parentMessage }}</p>
<ChildComponent v-model="parentMessage" />
</div>
</template>
<script>
export default {
props: {
modelValue: String,
},
computed: {
childMessage: {
get() {
return this.modelValue;
},
set(value) {
this.$emit('update:modelValue', value);
},
},
},
};
// Contributed by Nikunj Sonigara
</script>
<template>
<div>
<h2>Child Component</h2>
<input type="text" v-model="childMessage" />
</div>
</template>
Output:
Similar Reads
How to Pass Data From Child Component To Its Parent In ReactJS ? In ReactJS, the flow of data is typically one-way, meaning data is passed from parent to child components using props. However, there are situations where you may need to pass data from a child component back up to its parent component. In this article, we will cover how to pass data from a child co
5 min read
How to Pass Value from One Child Component to Another in VueJS ? Vue.js is a JavaScript framework used in building powerful and beautiful user interfaces. The key feature of Vue.js is its component-based architecture that allows the developers to create reusable and modular components. In this article, we will learn how to pass value from one child component to a
3 min read
How to set Parent State from Children Component in ReactJS? To set the parent state from a child component, we use React’s unidirectional data flow. Instead of directly passing data, we pass a function that enables the child to send data back to set the parent state.Prerequisites:React JSuseState HookApproachTo set parent state from child component in React,
2 min read
How to Call a Parent Method from a Child Component in Vue 3 ? Vue.js is a JavaScript framework for building user interfaces. In Vue 3 parent and child component can communicate with each other through props and events. Props are used to pass the data from the parent to the child component and events are used to pass the data from child to parent component. The
3 min read
Passing data from Child to Parent Component in Angular In Angular, passing data from a child component to its parent component involves emitting events. Essentially, the child component emits an event containing the data that the parent component needs to receive. This is typically achieved using Angular's EventEmitter class, where the child component e
3 min read