Component Event in Lightning

 Component Events in Salesforce Lightning Framework

Lightning framework is based on event-driven architecture which allows to communicate between different events. Lightning events are fired from JavaScript controller actions that are triggered by a user interacting with the user interface.

The communication between components are handled by events. There are two types of custom events in the Lightning Framework:

• Component Events
• Application Events

Component Events can be handled by same component or a component that instantiates or contains the component. The component events can only be registered in child component and handled by parent component.

Component Event Example:
In below example by using component event, I’m passing the values from a child component to a parent component via event.

Sample Component Event:
Create a sample component type event. Use type=”COMPONENT” in the aura:event tag for an component event. The attribute type is the one that will differentiate Component event from Application event.

<!--SampleComponentEvent.evt-->

<aura:event type="COMPONENT" description="Sample Component Event">

  <aura:attribute name="message" type="String"

   default="Hello World!!"/>

</aura:event>

Child Component:
The event is registered in this component by using aura:registerEvent in its markup.

<!--Child.cmp-->

<aura:component >

    <aura:registerEvent name="sampleCmpEvent"

    type="c:SampleComponentEvent"/>

 <lightning:button label="Click to fire the event" variant="brand"

 onclick="{!c.childComponentEvent}"/>

</aura:component>

Child Component JS Controller:
To set the attribute values of event, call event.setParam() or event.setParams().

1 2 3 4 5 6 7 8 9

({    childComponentEvent : function(cmp, event,helper) {       //Get the event using registerEvent name.       var cmpEvent = cmp.getEvent("sampleCmpEvent");       //Set event attribute value       cmpEvent.setParams({"message" : "Welcome "});       cmpEvent.fire();     } })

Parent Component:
The component event handled by the Parent Component that fired using aura:handler in the markup.
The name attribute in aura:handler must match the name attribute in the aura:registerEvent tag in the Child Component that fires the event.
The action attribute of aura:handler sets the client-side controller action to handle the event.

<!--Parent.cmp-->

<aura:component >

    <aura:attribute name="eventMessage" type="String"/>

    <aura:handler name="sampleCmpEvent" event="c:SampleComponentEvent"

    action="{!c.parentComponentEvent}"/>

    <div class="slds-m-around_xx-large">

        <c:Child />

        <p>{!v.eventMessage}</p>

    </div>

</aura:component>





Parent Component JS Controller:

1 2 3 4 5 6 7 8

({    parentComponentEvent : function(cmp, event) {     //Get the event message attribute     var message = event.getParam("message");     //Set the handler attributes based on event data     cmp.set("v.eventMessage", message + 'Mallesh');     } })