Salesforce Lightning Events with example

Passing values from child component to parent component using Lightning Events.

CeeeEvent:

<aura:event type="COMPONENT">
    <aura:attribute name="firstName" type="String"/>
    <aura:attribute name="lastName" type="String"/>
    <aura:attribute name="emailId" type="String"/>
    <aura:attribute name="mobileNumber" type="String"/>
    <aura:attribute name="contactDetails" type="Contact[]"/>

</aura:event>

Child component : CeeeCmponent1

<aura:component controller="contactHanler">
    <aura:attribute name="firstName" type="String"/>
    <aura:attribute name="lastName" type="String"/>
    <aura:attribute name="emailId" type="String"/>
    <aura:attribute name="mobileNumber" type="String"/>
    <aura:attribute name="contactDetails" type="Contact[]"/>
    <aura:registerEvent name="cmpEvent" type="c:CeeeEvent"/>
    <lightning:input type="text" label="First Name" value="{!v.firstName}"/>
    <lightning:input type="text" label="Last Name" value="{!v.lastName}"/>
    <lightning:input type="text" label="Email ID" value="{!v.emailId}"/>
    <lightning:input type="text" label="Phone" value="{!v.mobileNumber}"/>
    <lightning:button  label="Search" onclick="{!c.fireComponentEvent}" />

</aura:component>


ControllerJS :

({
    fireComponentEvent : function(cmp, event) {
        var cmpEvent = cmp.getEvent("cmpEvent");
        var action = cmp.get("c.getAFewContacts");
        action.setCallback(this,function(response){
            console.log("response.getState---"+response.getState());
            console.log("response.code---"+response.getReturnValue());
            cmp.set("v.contactDetails",response.getReturnValue());
            if(response.getState() === "SUCCESS"){
                cmpEvent.setParams({
                    "firstName"       :  cmp.get("v.firstName"),
                    "lastName"        :  cmp.get("v.lastName"),
                    "emailId"         :  cmp.get("v.emailId"),
                    "mobileNumber"    :  cmp.get("v.mobileNumber"),
                    "contactDetails"  :  cmp.get("v.contactDetails")
                });
                cmpEvent.fire();
                console.log("contact list---"+JSON.stringify(cmp.get("v.contactDetails")));
            }
        });
        $A.enqueueAction(action);
    }

})

Parent Handler : CeeeParentHandler

<aura:component>
    <aura:attribute name="firstName"     type="String"/>
    <aura:attribute name="lastName"      type="String"/>
    <aura:attribute name="emailId"       type="String"/>
    <aura:attribute name="mobileNumber"  type="String"/>
    <aura:attribute name="contactDetails" type="Contact[]"/>
    <aura:attribute name="numEvents"     type="Integer"       default="0"/>
    <aura:handler   name="cmpEvent"      event="c:CeeeEvent"  action="{!c.handleComponentEvent}"/>
    <c:CeeeCmponent1/>
    <p>{!v.firstName}</p>
    <p>{!v.lastName}</p>
    <p>{!v.emailId}</p>
    <p>{!v.mobileNumber}</p>
    <p>Number of events: {!v.numEvents}</p>
    <aura:iteration items="{!v.contactDetails}" var="item">
        {!item.Id}{!item.Email}<br/>
    </aura:iteration>
</aura:component>

ControllerJS:

({
    handleComponentEvent : function(cmp, event) {
        console.log(event.getParams().firstName);
        console.log(event.getParams().lastName);
        console.log(event.getParams().emailId);
        console.log(event.getParams().mobileNumber);
        cmp.set("v.firstName",        event.getParams().firstName);
        cmp.set("v.lastName",         event.getParams().lastName);
        cmp.set("v.emailId",          event.getParams().emailId);
        cmp.set("v.mobileNumber",     event.getParams().mobileNumber);
        cmp.set("v.contactDetails",   event.getParams().contactDetails);
        var numEventsHandled = parseInt(cmp.get("v.numEvents")) + 1;
        cmp.set("v.numEvents",      numEventsHandled);
    }
})

Apex Controller : contactHanler

public class contactHanler {
    @AuraEnabled public static List<Contact> getAFewContacts(){
        return [select Id,Name,Email from contact];
    }
}

CeeeHandlerApp :


<aura:application extends="force:slds">
<c:CeeeHandler></c:CeeeHandler>
</aura:application>