How to Update Parent Data from Child Component in VueJS?

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:

Updated 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.

<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 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.

<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: