[Vuejs]-Passing data from Child component to Parent component in a wizard -VueJs

3👍

You can consider the $emit as an event that contains some data. Here is a fast example of how to get data back to parent using $emit:

Parent Component:

<ParentComponent>
    ...
    <ChildComponent  @onEmitEvent="handleEmitEvent($event)">
    </ChildComponent>
    ...
    methods: {
       handleEmitEvent(dataFromChild){
           // HANDLE THE DATA HERE
       }
    }
</ParentComponent>

Child Component:

<ChildComponent>
    ...
    ...
    <!-- element that will send the data back to ParentComponent -->
    <!-- I am using VueMaterial so for me it will be something like: -->
    <!-- <md-button @click="sendDataToParentComponent(data)"> -->
    ...
    ...
    methods: {
       sendDataToParentComponent(data){
           // FOLLOWING LINE WILL SEND THE "data" OBJECT TO THE PARENT
           this.$emit("onEmitEvent", data);
       }
    }
</ParentComponent>

Accessing the data on the parent level is the same as you handle the Object itself. You can also send "complicated objects" as:

sendDataToParentComponent(data){
    // FOLLOWING LINE WILL SEND THE "data" OBJECT TO THE PARENT
    this.$emit("onEmitEvent", {data: dataObject, addObject: true);
}

And on the the parent level you will have:

handleEmitEvent(dataFromChild){
    // dataObject
    dataFromChild.data

    // addObject
    dataFromChild.addObject
}

Leave a comment