Component Events: Way to Communicate Between Components in Containment Hierarchy

Components events can be used to pass information between lightning components which are in containment hierarchy. Component events can be handled by component which is firing it or by component container.

If you want to learn more about Application events, then refer below URL:
Application Events : Way to Communicate Between Different Lightning Components

Through this blog, I am going to explain how to utilize component events with sample code.

I have created a sample lightning app which contains "c:SK_MasterCmp".  "c:SK_MasterCmp" contains another component "c:SK_ChildCmp"

Below are steps which you need to follow while utilizing component events:

• Create Lightning event of type "COMPONENT".

        <aura:event type="COMPONENT" description="Event template" >

              <aura:attribute name="passedValue" type="string"/>

        </aura:event>

• Register the component event which is going to fire component event.

        <aura:registerEvent name="changeValueEvent" type="c:SK_LightningEventChannel"/>

• Use below syntax to fire event and pass information from "c:ChildCmp".

        var newEvent = component.getEvent("changeValueEvent"); 

        newEvent.setParams({"passedValue":"twitter handle-@sunil02kumar"});                               

        newEvent.fire();

• Create handler in component which needs to handle the events means want to consume that information. Note the name of handler should be same as that while registering event:

       <!--name should be equal to name while register event-->

       <aura:handler name="changeValueEvent" event="c:SK_LightningEventChannel" 

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

• Create function in controller.js which will be called when "c:MasterCmp" will handle the the event.

       handleNotification : function(component, event, helper){

           console.log('****handling event');

           var sentMessage= event.getParam("passedValue");

           component.set("v.mastervalue", sentMessage);

      }

Below is complete code for reference:

Hope this help!!