1

I'm building/modifying a tool using lightning components which houses (dynamically-created) input components in a larger wrapper component. Currently, the inputs correctly send events to the wrapper (to update a master map of values), but because some inputs are linked in different ways, I then need to send an event (linkEvent) from the wrapper to reach and update other inputs.

EDIT: I should mention, there are multiple nested 'levels' between the Wrapper and these Inputs, and some Inputs themselves contain sub-inputs which need to communicate in the same way.

Here's some code to illustrate the issue:

WrapperComp:

<aura:registerEvent name="linkEvent" type="c:MyLinkEvent" />
//
buildComponent:function(component, options) {
    $A.createComponent('InputComp', options, function(el) {
        var body = component.get('v.body');
        if (options['link']) {
            el.addEventHandler('linkEvent', el.getReference('c.handler'));
        }
        body.push(el);
        component.set('v.body', body);
    });
},
handleComponentEvent:function(component, event, helper) {
    var val = event.getParam('payload');
    var link = event.getParam('link');
    // Do some things
    var ev = component.getEvent('linkEvent');
    ev.setParams({'payload':val,'link':link});
    ev.fire();
}

InputComp:

<aura:registerEvent name="linkEvent" type="c:MyLinkEvent" />
//
handler:function(component, event) {
    console.log('This is not being logged');
    var eLink = event.getParam('link');
    var cLink = component.get('v.link');
    if (eLink==cLink) {
        // Do some things
    }
}

My inputs are reaching the wrapper without a problem, I just need to send information back to children after. My two main questions are: Can this be accomplished with Component events? And if so, do I need to register the event in the parent (because that's where I call addEventHandler()), or in the child? Or both?

  • 1
    You might be able to achieve that via a method based on my understanding of this article (developer.salesforce.com/blogs/developer-relations/2017/04/…) – BritishBoyinDC Jun 19 '18 at 21:52
  • @BritishBoyinDC I left out some details for the sake of brevity, but there are actually a few levels between the input components and the wrapper. A Form wrapper contains Page wrappers, which in turn contain Inputs. And some of those inputs contain sub-inputs. I'm not certain if methods (or attributes) will work in that setup. – iwhitt567 Jun 19 '18 at 22:08
1

Typically when you are talking about top down approach you tend to use attributes or aura methods.

My suggestion for your use case would be using application event where your hierarchies are very complex, and use the application event only when absolutely necessary. Application events are great for supporting business logic events as they are quite flexible: They do not impose a particular architecture.(This is key for your use case considering performance) This is ideal when building components that are exposed in the Lightning App Builder. However, bear in mind that this flexibility comes at the expense of performance in certain use cases due to the event broadcast.

In every other scenario where u are trying to reach from bottom up use components events.Component events are “clones” of standard DOM events (mouse clicks, key press, and so on). Just like their DOM counterparts, they propagate up in the component hierarchy via a bubbling mechanism and can be stopped en route to the application root component.

Question 1: NO

If by using multiple application event your performance is taking a hit, I would say its time for you to rethink your design.

Below is a beautiful blog about passing data around lightning components.

Lightning Inter-Component Communication Patterns

  • Good to know. I don't think the performance hit is going to be noticeable in any way, I just wanted to make sure I was using Component Events whenever possible. Thank you for the explanation and the additional resource. – iwhitt567 Jun 20 '18 at 13:35
  • @iwhitt567 Glad I was able to help. – codeyinthecloud Jun 20 '18 at 13:36
1

According to this article, it seems the answer is yes but only if you specify a capture phase.

I haven't seen this pattern too often, as I believe that either attributes or methods are more commonly used to communicate down in hierarchy.

  • I don't think attributes or methods can solve this problem, since there are actually multiple nested 'levels' between the Wrapper and Inputs. I tried setting the phase to "capture" in my addEventHandler, but that hasn't solved it. – iwhitt567 Jun 19 '18 at 22:13
  • 1
    If you're going down so many levels, you might as well make an application event to bypass all the hierarchy? – tsalb Jun 19 '18 at 22:56
  • That makes sense. – iwhitt567 Jun 20 '18 at 13:32

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.