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"));
}
Best Answer
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.