Vuejs update parent data from child component

In Vue.js, child components typically update parent component data through custom events. This approach ensures unidirectional data flow, aligning with Vue's design principle where data flows from parent to child (via props), and events flow from child to parent.

Step-by-Step Explanation:

1. Define the Parent Component: Define the data that needs to be updated by the child component within the parent component.

2. Define Event Handling Methods: Implement a method in the parent component to handle data updates.

3. Trigger Events in the Child Component: Use the $emit method to trigger an event in the child component, optionally passing required data as parameters.

4. Listen for Child Component Events: Add an event listener on the child component's tag in the parent component and specify the handling method.

Example:

Suppose we have a parent component ParentComponent and a child component ChildComponent. We aim to update the parentData property in ParentComponent from ChildComponent.

Parent Component Code (ParentComponent.vue):

vue
<template>
  <div>
    <child-component @update-parent="updateData" />
    <p>Parent component data: {{ parentData }}</p>
  </div>
</template>

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

export default {
  components: {
    ChildComponent
  },
  data() {
    return {
      parentData: 'Initial data'
    };
  },
  methods: {
    updateData(newData) {
      this.parentData = newData;
    }
  }
}
</script>

Child Component Code (ChildComponent.vue):

vue
<template>
  <button @click="updateParentData">Update Parent Component Data</button>
</template>

<script>
export default {
  methods: {
    updateParentData() {
      this.$emit('update-parent', 'Updated data');
    }
  }
}
</script>

In this example, clicking the button in ChildComponent triggers the updateParentData method. This method emits an event named update-parent via this.$emit, passing the new data ('Updated data'). The parent component ParentComponent listens for this event and invokes the updateData method to update parentData with the provided data.

This pattern maintains component independence and reusability while ensuring data update flows are clear and traceable.