How to pass values and call a method from Parent-to-Child Lightning Aura Component

Communicating down the hierarchy we have two ways to go:

1. Using aura:attribute:

The aura: attribute is most commonly used to communicate from parent to child, kind of down the hierarchy. An attribute is more like a variable present on a component or event.

Parent Component.cmp (Sender)

<aura:component>
    <c:ChildComponent Message="Hello" Message2="World"/>
</aura:component>

ChildComponent.cmp (Reciever)

    <aura:attribute name="Message" type="String"/>
    <aura:attribute name="Message2" type="String"/>

2. Using Aura : Method

We can use aura method tag to specify the method in the child component that we can call from the parent. In the parent component, we specify the child component and also impart an id to it. We can use this id to later refer and find the child component and then call to the aura method and attach parameters to be passed along.

ParentComponent.cmp(Sender)

<aura:component>

// put an id on the comp to find
    <c:ChildComponent aura:id="compChild"/> 

        <lightning:button label="Just a button" onclick="{! c.onAction}" />

 </aura:component>

ParentComponent.js

({
    onAction : function(component, event, helper) {
        var findcomp = component.find('compChild');
        findcomp.someMethod("Param1", "Param2");
    }
})

ChildComponent.cmp(Reciever)

<aura:component>
    <aura:method name="someMethod" action="{!c.doAction}"
  description="Sample method with parameters"> 
    <aura:attribute name="param1" type="String" default="parameter 1"/> 
    <aura:attribute name="param2" type="Object" /> 
</aura:method>
</aura:component>

ChildComponent.js

({
    doAction : function(cmp, event) {
        var params = event.getParam('arguments');
        if (params) {
            var param1 = params.param1;
            // add your code here
        }
    }
})

Read More: How to pass data from child to parent aura component

Share with friends and colleagues ?

• Facebook
• Twitter
• LinkedIn
• Tumblr