9

I have a nested component structure

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

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. – Martin Lezer Jun 26 '17 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 Jun 26 '17 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? – Robert Sösemann Jun 26 '17 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. – Martin Lezer Jun 26 '17 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. – Martin Lezer Jun 26 '17 at 12:52
11

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

({  // Parent's controller
  setEventRoot: function(component, event, helper) {
    event.stopPropagation();
  }
})

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 ;-) – Robert Sösemann Jun 26 '17 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. – Martin Lezer Sep 25 '17 at 16:23

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.