Lightning Events

Question

Good day! Today I was tasked to do a simple "app/function" that will increment an integer from parent using a button from a child component. I understood how the code works but something just bothers me, how is that the <aura:registerEvent name = "toEvent" type = "c:IncrementEvent"/> from child component must be the same with <aura:handler name="toEvent" event="c.IncrementEvent" action="{!c.getFromChild}"/> from the parent controller?

Here is the rest of the code:

Parent.cmp

<aura:component >
<h1>Parent</h1>    
<aura:attribute name = "incremented" type = "Integer" default = "0"/>
<aura:handler name="toEvent" event="c.IncrementEvent" action="
{!c.getFromChild}"/>
<ui:outputText value = "{!v.incremented}"/>
<c:Child numFromParent = "{!v.incremented}"/>
</aura:component>

ParentController.js

({
getFromChild : function(component, event, helper) {

    var disp = event.getParam("pass");
    component.set("v.incremented", disp);
}
})

Child.cmp

<aura:component >
<aura:attribute name = "numFromParent" type = "Integer"/>
<aura:registerEvent name = "toEvent" type = "c:IncrementEvent"/>
<ui:button label="Click Here"
           press="{!c.increment}"/>
</aura:component>

ChildController.js

({
increment : function(component, event, helper) {
    var inc = component.get("v.numFromParent");
    inc++;

    var childEvent = component.getEvent("toEvent");
    childEvent.setParams({"pass": inc});
    childEvent.fire();
}
})

and finally the event IncrementEvent.evt

<aura:event type="COMPONENT">
<aura:attribute name="pass" type="Integer" />
</aura:event>

Thanks in advance and more power guys!

Answer 1

I am not sure I fully understood your question (sorry if not) but the event name and type/event attributes must match between the aura:registerEvent and aura:handler.

Here is a sample gist showing all of the code required to fire and handle a Component Event.

You can find more information on events in the Lightning Inter-Component Communication Patterns blog post.

Cheers,