[SalesForce] Lightning Components: Firing a nested/child component’s methods from the super/parent component

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 aura:method. 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

I guess the application events should just work .I feel you are messing a bit with the syntax .

Lets try correcting it

The application events are fired as below

//super-component_controller.js
 ({
  fireEvent: function(component){
  var myEvent = $A.get("e.c:myEvent");
  myEvent.fire();
  console.log('event fired');
  }
})

Nested component handling

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

If you look at this carefully ,couple of key points

1. Application events are fired using global $A variable

2.The name on the registration component for aura:register is mandatory but its not used any where else .

Related Topic