Vue.js Pass Data To Parent Component

Send data from the Child Component to Parent Component using the $emit() method.

STEP 01: Invoke the $emit() method in the child component where you want to send a piece of the data to its parent component.

 this.$emit('name', "Raja Tamil");

The first argument is the $event name and the second argument is the actual data that you want to pass to the parent component.

FREE 1-HOUR COURSE:
Vue JS & Google Maps API

Build a location detector web app using Vue JS & Google Maps API step-by-step instructions from scratch!

ACCESS FREE COURSE NOW

STEP 02: Use the same $event name prefixed with the @ symbol where you define the child component inside the template in the parent component.

 <ChildComponent @name="getName"/>

The value of it will be a function and it will have the actual value returned in its argument.

STEP 03: Declare the getName function inside the methods objects with an argument.

 methods: {
    getName(value) {
      console.log(value); // Raja Tamil
   }
 }