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

    Published By: Venu Gutta
    Published on: Wednesday 23 December 2020
    A- A+

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

    How to Pass Data From Child Lightning Aura Component to Parent Lightning Aura Component


    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

  • 2 comments to ''How to pass values from child to parent lightning aura component with Component Event"

    ADD COMMENT