Aura.Action Vs aura:registerEvent in Lightning

Instead of an Aura.Action attribute, you could use  to register an onclick event in the child component. You’d have to define the event and create an action in the child’s controller to fire the event. This event-based approach requires a few extra steps but it’s more in line with standard practices for communicating between components.

Action has some known limitations:

  • It is discouraged to use component.set() with the Aura.Action attribute types.
  • It is discouraged to use $A.enqueueAction() in the child component to enqueue the action passed to the Aura.Action attribute.

If you want to build some more dynamic, or to overcome these limitations, the recommended way would be to fire an event from the child component that is handled by the parent component to perform the required action using aura:registerEvent

AuraActionEvent.evt

< aura:event type="COMPONENT" description="Event to Execute Aura.Action" / >
AuraActionChild.cmp
<aura:component  >
    <aura:registerEvent name="customEvent" type="c:AuraActionEvent" />

    <lightning:button label="Aura Action Event" onclick="{!c.fireAuraAction}"/>
</aura:component>

AuraActionChildController.js


({
    fireAuraAction : function(component, event, helper) {
        var compEvent = component.getEvent("customEvent");
        compEvent.fire();
    }
})

AuraActionParent.cmp


<aura:component >
<aura:handler name="customEvent" event="c:AuraActionEvent" action="{!c.handleComponentEvent}"/>

<c:AuraActionChild aura:id="auraActionButton" />
</aura:component>

AuraActionParentController.js


({
    handleComponentEvent : function(component, event, helper).  {
        var buttonClicked = event.getSource().getLocalId();
        if(buttonClicked == 'auraActionButton')
            alert('Aura Action using Event Concept');
        }
})

As you can see in the example, in this way you will need to write some extra code, however, we have a finer degree of control, as we could for example add other event handlers dynamically or pass more information to the parent using event attributes. Also,  we are more inline with standard practices for components communication.

One thought on “Aura.Action Vs aura:registerEvent in Lightning

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out /  Change )

Google+ photo

You are commenting using your Google+ account. Log Out /  Change )

Twitter picture

You are commenting using your Twitter account. Log Out /  Change )

Facebook photo

You are commenting using your Facebook account. Log Out /  Change )

Connecting to %s