5

To build a nested component structure as detailed here I have build the solution described in one of the answers which recommended to send an APPLICATION event...

parentInitialized.evt

<aura:event type="APPLICATION">
    <aura:attribute name="data" type="Object" />
</aura:event>

from the parent component

parent.cmp

<aura:component >
    <aura:attribute name="children" type="Object[]" default="[]" />

    <aura:registerEvent name="parentInitialized" type="c:parentInitialized" />

    <aura:handler name="init" value="{!this}" action="{!c.init}" />
    <aura:handler name="childInitialized" event="c:childInitialized" action="{!c.registerStep}"/>   
</aura:component>

parentController.js

({
    init: function(component, event, helper) {
        var evt = $A.get("e.c:parentInitialized");
        evt.fire();
    },

    //FAILS HERE: child component events are never handled here
    registerStep: function(component, event, helper) {
        var children = component.get("v.children");
        children.push({ "data": event.getParam("data")});
        component.set("v.children", children);
    }
})

...to tell the nested child components to register themselves using a bubbling COMPONENT event

childInitialized.evt

<aura:event type="COMPONENT">
    <aura:attribute name="data" type="Object" />
</aura:event>

child.cmp

<aura:component >
    <aura:attribute name="position" type="Integer" required="true" />
    <aura:attribute name="title" type="String" required="true" />

    <aura:registerEvent name="childInitialized" type="c:childInitialized" /> 

    <aura:handler event="c:parentInitialized" action="{!c.registerWithParent}"/>
</aura:component>

childController.js

({
    registerWithParent: function(component, event, helper) {
        var evt = component.getEvent("childInitialized");
        evt.setParams({
            "data": component.get("v.position")
        });
        evt.fire();
    }
})

But this never happens. The parent sends the Application event which is received by a child components. The also fire their component event. At least I see no errors.

But it is never received by parentController.js registerWithParent() method. Why??

Note: The Lightning Inspector didn't run for strange reasons on this page in my Chrome so I could not see if the events where fired and just not handled or not even fired

11

When you use the pattern of:

<c:parent>
   <c:child name="xyz" />
</c:parent>

Then you must use includeFacets="true" to make a component event from the child bubble to the parent in the way you think it would in a DOM i.e.

<aura:handler name="childInitialized" event="c:childInitialized" action="{!c.registerStep}" includeFacets="true"/>

This worked for me with component events, but Robert informs me that to make it work with his application event, he also required phase="bubble" i.e.

<aura:handler name="childInitialized" event="c:childInitialized" action="{!c.registerStep}" includeFacets="true" phase="bubble"/>

See https://developer.salesforce.com/docs/atlas.en-us.lightning.meta/lightning/events_component_bubbling.htm

This cost me a lot of time a few weeks ago! Grr!

  • You save my week... great! For some reasons that I don't fully understand I also had to add phase="bubble". Maybe you can add that to your answer. – Robert Sösemann Jun 26 '17 at 9:58
  • Are you also using Application events from Parent to child? How can I ensure that only the correct parents talk to their children. Add aura:id of parent to app event payload ?? Any idea? – Robert Sösemann Jun 26 '17 at 10:02
  • 1
    @RobertSösemann I was using this for pretty much the same scenario as you (child to parent communication), and I was using a component event. Unless there's some other reason to do so, component event seems better. In my application, I just used event.getSource() in the handler. – Aidan Jun 26 '17 at 10:20
  • for parent to child you can use aura:methods. you can expose a method from the child component using aura:method and then in the child component declaration in parent give an aura:id. using the aura:id you can invoke the child component method. – RedDevil Jun 26 '17 at 10:36
  • 1
    @RobertSösemann you're right - I misunderstood that part of what you're trying to do. Your parent to child communication probably would need to be an application event. It still seems a bit smelly, though, and I don't know enough about your overall goal to suggest an improvement. I was going to write a blog post about inter-component communication (more than the SF-blog one), but I haven't got around to it yet. Will let you know when I do! – Aidan Jun 26 '17 at 12:01

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.