Lightning Component Events

Introduction

In this blog, I am going to explain salesforce lightning component events. The lightning component is event-driven framework model which control the flow determined by the occurrence of events from the notifier to the handler.The lightning framework supports two type of events namely component events and application events.A component event is fired from an instance of a component. A component event can be handled by the component that fired the event or by a component in the containment hierarchy that receives the event. Application events follow a traditional publish-subscribe model. An application event is fired from an instance of a component and all components that provide a handler for the event are notified.

Component Events

A component event is fired from an instance of a component. A component event can be handled by the component that fired the event or by a component in the containment hierarchy that receives the event.you can understand the component event in three steps . 1. Create Custome component event 2. Fire the Component event  3. Handle the component event

Step 1: Create Component Events
Create a custom component event name “CmpEvent.evt” as with below code.Events can contain attributes that can be set before the event is fired and read when the event is handled.

The component that fires an event can set the event’s data. To set the attribute values, call event.setParam() or event.setParams(). A parameter name set in the event must match the name attribute of a <aura:attribute> in the
event as shown below.

The component that handles an event can retrieve the event data. To retrieve the attribute value in this event, call event.getParam(“message”) in the handler’s client-side controller.

Step 2: Fire Component Events

Fire a component event to communicate data to another component. A component event can be handled by the component that fired the event or by a component in the containment hierarchy that receives the event.To fire the component event, you need to register the event first the need fire from the component.

.Use fire() to fire the event from an instance of a component as shown below. get the register events from the controller call getEvent bypassing the register event name and fire the event by using event.fire() method .

Step 3: Handling Component Events
A component event can be handled by the component that fired the event or by a component in the containment hierarchy that receives the event.
Use <aura:handler> in the markup of the handler component. For example:

The name attribute in <aura:handler> must match the name attribute in the <aura:registerEvent> tag in the component that fires the event.
The action attribute of <aura:handler> sets the client-side controller action to handle the event. The event attribute specifies the event being handled.

Lets Put into Action 

So far we have seen how to setup and fire the component events steps. let’s put all into the actions now.Now create a new component Notifer.cmp will are used to register and fire the component event.

Notifer.cmp

Handler.cmp

Handler component is used to receive the events which are fired by notifier component and execute the corresponding action

So for the notifier and handler component sends the event parameters from the predefined attribute values. Now, lets send event data from the input text to handler from the notifier  components .TO do that change the notifier component as shown below.

With the above change, you can enter the input text and pass it to the event params values from the entered text values from the notifier component  and same values is received in the handler component from the event params .