function readOnly(count){ }
Sign Up ›
Starting November 20, the site will be set to read-only. On December 4, 2023,
forum discussions will move to the Trailblazer Community.
Learn More

Browse by Topic
ShowAll Questionssorted byDate Posted
+ Start a Discussion
Zac RosenbergZac Rosenberg 

Lightning Components: Firing a nested/child component's methods from the super/parent component?

Hello,

I'm having issues communicating to a nested component. I would like a component to be able to run a method in the nested-component's controller.js (or helper). I have tried both events and via and no luck. Here is the example markup:
  
<!-- myEvent.evt --> 
<aura:event type="APPLICATION"> 
</aura:event> 

<!-- super-component --> 
<aura:component>
    <aura:registerEvent name="myEventName" type="c:myEvent"/> 
    <c:my_Nested_Component /> 
    <ui:button press="{!fireEvent}" 
<aura:component> 

//super-component_controller.js 
({ 
    fireEvent: function(component){ 
        var myEvent = component.getEvent("myEventName"); 
        myEvent.fire(); 
        console.log('event fired'); 
    } 
}) 

------------------------------------------ 

<!-- nested-component --> 
<aura:component> 
    <aura:handler name="myEventName" event="c:c:myEvent" action="{!c.gotEvent}" /> 
<aura:component> 

//nested-component_controller.js 
({ 
    gotEvent: function(component, event){ 
        console.log('received event!'); 
    } 
})

This does not work. I tried the same exact code that I placed on the nested-component on a super-super-component, and it worked perfectly.The super-super component received the event. But the nested component is not able to. I figured this had to do with events only bubbling up (though the documentation does say that that is only the case with Component events, not application events).

So the other option I read online is using . I tried doing this, but this too did not work for speaking to a nested component.

How can a parent component cause a method on the nested component to fire?

Thank you
Best Answer chosen by Zac Rosenberg
Zac RosenbergZac Rosenberg
This issue was answered here: http://salesforce.stackexchange.com/questions/108544/lightning-components-firing-a-nested-child-components-methods-from-the-super-p

The problem was that I was using component.getEvent() instead of $A.get(), which is required for Application level events. Additionally, the name of the registered event is not the way to reference the event from the handler, but rather using it's actual file name, like so:
  
//super-component_controller.js 
({ 
  fireEvent: function(component){
    var myEvent = $A.get("e.c:myEvent"); 
    myEvent.fire(); console.log('event fired'); 
  } 
}) 

<!-- nested-component --> 
<aura:component> 
  <aura:handler event="c:myEvent" action="{!c.gotEvent}" /> 
<aura:component>



Thank you to @MohithShrivastava for figuring this one out!

All Answers

Zac RosenbergZac Rosenberg
This issue was answered here: http://salesforce.stackexchange.com/questions/108544/lightning-components-firing-a-nested-child-components-methods-from-the-super-p

The problem was that I was using component.getEvent() instead of $A.get(), which is required for Application level events. Additionally, the name of the registered event is not the way to reference the event from the handler, but rather using it's actual file name, like so:
  
//super-component_controller.js 
({ 
  fireEvent: function(component){
    var myEvent = $A.get("e.c:myEvent"); 
    myEvent.fire(); console.log('event fired'); 
  } 
}) 

<!-- nested-component --> 
<aura:component> 
  <aura:handler event="c:myEvent" action="{!c.gotEvent}" /> 
<aura:component>



Thank you to @MohithShrivastava for figuring this one out!
This was selected as the best answer
Dinesh_Kumar_NagarathinamDinesh_Kumar_Nagarathinam
There is no need of Event to call Child's method from Parent component. The salesforce itsef given <aura:method /> Component. by using this <aura:method /> we can deirectly call the child component's method.
  
<!-- super-component --> 
<aura:component>    
    <c:my_Nested_Component aura:id="nestcmp"/> 
    <ui:button press="{!fireEvent}" 
<aura:component> 

//super-component_controller.js 
({ 
  fireEvent: function(component){
    var nestedcomponent= component.find("nestcmp");
    nestedcomponent.childmethod(component);
  } 
}) 

<!-- nested-component --> 
<aura:component> 
  <aura:method name="childmethod" action="{!c.methodToFire}"> 
       <aura:attribute name="component" type="Object" default="{}" /> 
  </aura:method>
<aura:component>

//nested-component_controller.js 
({ 
    methodToFire: function(component){ 
        console.log('received event!'); 
    } 
})

We should avoid to use "Event" in this condition.

Parent to Child   ---> Go with <aura:method />
Child to parent   ---> Go With Event.