How to pass values from child to parent lightning aura component with Component Event
salesforcepoint →
Wednesday, 23 December 2020
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
