Undefined value from event

Question

I am trying to get the value of (firstName, lastName, emailAddress, mobile) from the parent component and use it in my child component but when I set it into params and logged the values, I always got an undefined result. Please advice and thank you in advance. :)

Event.evt

<aura:event type="COMPONENT" description="Event template">
    <aura:attribute name="firstName" type="Map" />
    <aura:attribute name="lastName" type="Map" />
    <aura:attribute name="email" type="Map" />
    <aura:attribute name="mobile" type="Map" />
</aura:event>

parent_component.cmp

<aura:component>
<aura:attribute name="firstName" type="String" default=""/>
<aura:attribute name="lastName" type="String" default=""/>
<aura:attribute name="email" type="String" default=""/>
<aura:attribute name="mobile" type="String" default=""/>

    <aura:registerEvent name="registerDetailsEvent" type="c:Event" />

                <c:FormInput
                    aura:id="firstName"
                    type="text"
                    name="firstName"
                    value="{!v.firstName}"
                    label="{!$Label.c.firstName}"
                    onkeyup="{!c.onChange}" />

                <c:FormInput
                    aura:id="lastName"
                    type="text"
                    name="lastName"
                    value="{!v.lastName}"
                    label="{!$Label.c.lastName}"
                    onkeyup="{!c.onChange}" />

                <c:FormInput
                    aura:id="email"
                    type="text"
                    name="email"
                    value="{!v.email}"
                    label="{!$Label.c.email}"
                    onkeyup="{!c.onChange}" />

                <c:FormInput
                    aura:id="mobile"
                    type="text"
                    name="mobile"
                    value="{!v.mobile}"
                    maxlength="15"
                    label="{!$Label.c.mobile}"
                    onkeyup="{!c.onChange}" />

</aura:component>

parent_component.js

onChange : function (component, event, helper){
var registerDetailsEvent = component.getEvent("registerDetailsEvent");
    registerDetailsEvent.setParams({
    "firstName" : component.get("v.firstName"),
    "lastName" : component.get("v.lastName"),
    "email" : component.get("v.email"),
    "mobile" : component.get("v.mobile")
});
    registerDetailsEvent.fire();
}

child_component.cmp

<aura:component>

    <aura:handler name="registerDetailsEvent" event="c:Event" action= 
    {!c.registerDetailsEvent}"/>

</aura:component>

child_component.js

registerDetailsEvent: function(component, event, helper){
    console.log('Shoot');                                 
    console.log("firstName:", event.getParam("firstName"));
    console.log("lastName: ", event.getParam("lastName"));
    console.log("email: ", event.getParam("email"));
    console.log("mobileNumber: ", event.getParam("mobile"));
}

Answer 1

Component events are “clones” of standard DOM events (mouse clicks, key press, and so on). Just like their DOM counterparts, they propagate up in the component hierarchy via a bubbling mechanism and can be stopped en route to the application root component.

you can achieve it using aura methods .or try with the application events but not with components. in your case you are trying to create a component event and do parent to child communication which is not possible.

Answer 2

You shouldn't be using an Application event for this.

Reserve application events for communication between unconnected components or for when you need to communicate with multiple child components at once.

As @keepler said, use an Aura method for this. Example:

<aura:method name="registerDetails" action="{!c.doRegisterDetails}" > 
  <aura:attribute name="firstName" type="String" />
  <aura:attribute name="lastName" type="String" />
  <aura:attribute name="email" type="String" />
  <aura:attribute name="mobile" type="String" />
</aura:method>

Part of the controller method, doRegisterDetails:

doRegisterDetails : function(cmp, event) {
    var params = event.getParam('arguments');
    if (params) {
        var firstName = params.firstName;
        // etc
    }
}

And calling:

 component.find("mychildcomponent").registerDetails(firstName,lastName,email,mobile);

This assumes that the child component IS actually a child of the parent component.