I have a nested component structure

   <c:child />
   <c:child />

and I want c:parent to send a COMPONENT event which is received by the c:child components.

I don't want to use Component methods as this would required the parent to find the children using their aura:id which is not loosely-coupled anymore.

I also don't want to use APPLICATION type event because they might trigger something outside of the containment hierarchy of c:parent.

Can I make COMPONENT events travel down? And which special markup do I need for that?

  • 3
    From the documentation: Component events can only be handled by components above them in the containment hierarchy so their usage is more localized to the components that need to know about them. Commented Jun 26, 2017 at 12:16
  • 2
    I dont think component events can travel down it can only be handled by some component above in the containment hierarchy. My understanding of this event concept is that these events propogate up the DOM chain and they can either be handled in Bubble or capture phase. It never trickles down below.
    – RedDevil
    Commented Jun 26, 2017 at 12:17
  • @MartinLezer please use a real answer and provide the a link to the documentation. Any idea on how to restrict the application event to "only go down" the hierarchy? Commented Jun 26, 2017 at 12:18
  • 1
    I'm sorry I don't know any solution for this. I don't think this is possible. Or I am missing something. For me, the best solution is using aura:methods on the child components. If you want to make it generic, maybe you can define a base component which this aura:method, then inherit from this component on all your child components. Commented Jun 26, 2017 at 12:44
  • 3
    Maybe someone will come with the right solution :D If not, you'll be able to answer your own question with your favorite solution. Commented Jun 26, 2017 at 12:52

1 Answer 1


You'll want to use an application event; see the application event life cycle.

The trick here is that you must call stopPropagation on your event from c:parent in order to set itself as the "root" for the application event. This will limit your event's scope to just components within your own hierarchy. The following should suffice:

<!-- parent -->
  <aura:registerEvent name="customEvent" type="c:myCustomAppEvent" />
  <aura:handler name="customEvent" event="c:myCustomAppEvent" phase="capture" action="{!c.setEventRoot}" />
  <!-- code for your children here -->

({  // Parent's controller
  setEventRoot: function(component, event, helper) {

At this point, your child component simply needs to have an aura:handler to handle the event, like normal.

  • Awesome insight. As always with you ;-) Commented Jun 26, 2017 at 13:47
  • Looks like they changed the behaviour. You can't handle an application event if you define its name. It worked for me by removing the name attribute of the handler. Commented Sep 25, 2017 at 16:23

You must log in to answer this question.

Not the answer you're looking for? Browse other questions tagged .