Skip to content

Instantly share code, notes, and snippets.

@Sunil02kumar
Created August 12, 2018 09:34
Show Gist options
  • Save Sunil02kumar/70c1c771c17c719de455226519d5716d to your computer and use it in GitHub Desktop.
Save Sunil02kumar/70c1c771c17c719de455226519d5716d to your computer and use it in GitHub Desktop.
Component Events: Way to Communicate Between Components in Containment Hierarchy
<aura:component >
<aura:attribute name="childValue" type="string" default="Child"/>
<aura:registerEvent name="changeValueEvent" type="c:SK_LightningEventChannel"/>
<lightning:button name="ddff" label="Fire event" onclick="{!c.fireEvent}"/>
</aura:component>
({
fireEvent : function(component, event, helper) {
console.log('********firing event');
var newEvent = component.getEvent("changeValueEvent");
newEvent.setParams({"passedValue":"twitter handle-@sunil02kumar"});
newEvent.fire();
}
})
<aura:application extends="force:slds">
<c:SK_MasterCmp/>
</aura:application>
<aura:event type="COMPONENT" description="Event template" >
<aura:attribute name="passedValue" type="string"/>
</aura:event>
<aura:component >
<!--name should be equal to name while register event-->
<aura:handler name="changeValueEvent" event="c:SK_LightningEventChannel"
action="{!c.handleNotification}"/>
<aura:attribute name="mastervalue" type="string" default=""/>
<div style="background-color:#E6E6FA;border-style: solid;height:200px;margin:5%;padding:2%;">
<p>This is master Component- container for c:SK_ChildCmp</p>
<br/>
Display value passed from child component using component events---<b>{!v.mastervalue}</b>
<br/>
<div style="background-color:grey;border-style: solid;padding:2%;">
<p>This is child component present inside c:MasterCmp</p>
<c:SK_ChildCmp/>
</div>
</div>
</aura:component>
({
handleNotification : function(component, event, helper){
console.log('****handling event');
var sentMessage= event.getParam("passedValue");
component.set("v.mastervalue", sentMessage);
}
})
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment