lightning component event bubbling

Question

I've gone through the trailhead on components and the section on handling events with client-side controllers. Specifically the section on component events and handling bubbled events.

I have a Lightning Application that dynamically creates components inside the {!v.body} and one of those components is firing an Component event.

My question is: who will see that event?

The structure is something like this:

App
 --> Component_1
       -----> Component_1_ChildComponent_1
           --------> Component_1-ChildComponent_1_GrandChild_1
       -----> Component_1_ChildComponent_2 

So in the above structure - all the components are dynamically created and placed into the {!v.body} of the App.

If the Grandchild_1 component fires Event A. My understanding is that Component 1 should see that event?

In our app - the event is firing but not handled. If I switch to APPLICATION event instead of component event then it works but that's not what we want.

Am I mistaken or is component_1 not the value provider for those child components?

Answer 1

So, the short answer is dynamic components do not automatically bubble events up to their parents. The good news is you can manually create the binding between the registered event (in the child) and the parent's controller method.

See SFDC's brief documentation on the subject.

Hopefully this example can help explain how to use addHandler

Let us assume Component_1.cmp has the following handler:

<aura:handler name="Cmp_1_ChildCmp_1_Evt" event="c:myCustomCmpEvt" action="{!c.handleChild}"/>

And Component_1_ChildComponent_1.cmp has the following registered event

<aura:registerEvent name="Cmp_1_ChildCmp_1_Evt" type="c:myCustomCmpEvt"/>

During the creation of Component_1_ChildComponent_1 (during the $A.createComponent's callback), you will need to assign the parent's controller's method to the child component's registered event. It will look something similar to this:

childCreater : function(component, event, helper){
    var attrs; // your child's attributes
    $A.createComponent("c:Component_1_ChildComponent_1", attrs, function(newCmp, status, statusMsg){
        newCmp.addHandler("Cmp_1_ChildCmp_1_Evt", component, "c.handleChild"); 
        // The second and third argument is what tells the child to call this 
        // component's handleChild(...) function
    });    
}, 

handleChild : function(component, event, helper) {
    // your component event handler
}

I hope this helps.