How to pass values from child to parent lightning aura component with Component Event

 How to pass  Data from child lightning aura component to parent lightning aura component & Fire Parent component function from child component function

If we need to pass values from child aura component to parent, we can't pass directly, for that we need to create custom lightning event.

Steps for child to parent aura component communication:

 1. First we need to create custom Component event with required attributes (for passing values from child to parent). eg: compEvent

2. We need to register event on child component using  <aura:registerEvent>.

examle:

<aura:registerEvent name="sampleComponentEvent" type="c:compEvent"/>

3. Fire an Event: Fire an Event when some event occurs on child component(Eg: Button onclick, onchange of Input Text...).

Example:

var compEvent = component.getEvent("sampleComponentEvent");
         compEvent.setParams({"message" : "Static Text" });
         compEvent.fire();

4. We need to handle event on Parent Component. Handler name and registerEvent name should be same. We can invoke function with the help of "action" attribute.

Example:

    <aura:handler name="sampleComponentEvent" event="c:compEvent"
        action="{!c.handleComponentEvent}"/>

When the child function gets fired, it calls custom event and pass required parameter’s. After that event invokes Handler method on Parent component(Eg: handleComponentEvent). By using " event.getParam("eventAttributeName"); " we can retrieve values that are passed to custom event.

Example: Fire Parent Lightning Aura Component function from Child component and pass parameters.

compEvent (component Event):

<aura:event type="COMPONENT">
    <aura:attribute name="message" type="String"/>
</aura:event>

childComponentCmp

  <aura:component implements="flexipage:availableForAllPageTypes,flexipage:availableForRecordHome" access="global" >
    <aura:attribute name="enteredText" type="String"/>
    <aura:registerEvent name="sampleComponentEvent" type="c:compEvent"/>
    
    <div class="slds-box slds-p-around_medium">
        <h2>This is Child Component</h2>
        <lightning:input label="Enter Name" aura:id="name" value ="{!v.enteredText}" />
        <lightning:button class="slds-m-top_small" variant="brand" label="Pass Value To Parent" title="Click Here" onclick="{! c.handleClick }"/>
    </div>
</aura:component>
  

childComponentCmpController.js

  ({
    handleClick : function(component, event, helper) {
        var compEvent = component.getEvent("sampleComponentEvent");
        compEvent.setParams({
            "message" : component.get("v.enteredText") 
        });
        compEvent.fire();
    }
})
  

ParentComponentCmp

  <aura:component implements="flexipage:availableForAllPageTypes,flexipage:availableForRecordHome" access="global" >
    <aura:attribute name="enteredValue" type="String" />
    <aura:handler name="sampleComponentEvent" event="c:compEvent" action="{!c.handleComponentEvent}"/>
    
    <c:childComponentCmp/><br /><br />
    <div class="slds-box slds-p-around_medium">
        <h2>This is Parent Component</h2>
        value entered on child component input Box: <b>{!v.enteredValue}</b>
    </div>
</aura:component>
  

ParentComponentCmpController.js

  ({
    handleComponentEvent : function(component, event, helper) {
        var valueFromChild = event.getParam("message");
        alert(valueFromChild)
        component.set("v.enteredValue", valueFromChild);
    }
})
  

Output

Subjects:

Child to Parent in Aura Components Child To Parent Lightning Aura component communication Component Event in Lightning Aura Components with example. Lightning Aura Components Lightning Components

Share This: