Aura:method in lightning component
Till now we have seen how to handle communication between component's using events, now we will see how we can directly call a child component controller method from parent component controller method using Aura:method.
Sample syntax of Aura:method: (Declared in child)
<aura:method name="testMethod" action="{!c.someAction}"
description="Test aura method with test parameter">
<aura:attribute name="Test1" type="String" /> <!--optional parameter-->
</aura:method>
Note:
How to call aura:method from parent controller:
childComponentName.auraMethodNameInChildController("Some Value we are passing to child component attribute");
Now let us see the use with simple example,
gotoAuraMethod : function(component, event, helper) {
var chldComp=component.find("ChildComp"); // Finding child component
var res=chldComp.testMethod("From parent"); // Hitting aura method
component.set("v.parentAttributeName",res);
}
})
<aura:method name="testMethod" action="{!c.someAction}"
description="Test aura method with test parameter">
<aura:attribute name="childAttributeName" type="String" />
</aura:method>
</aura:component>
({
someAction : function(component, event, helper) {
var params=event.getParam('arguments');
if(params)
{
var param1=params.childAttributeName;
}
return param1+"Appended child value";
}
})
<aura:application extends="force:slds" >
<c:ParentComp/>
</aura:application>
After clicking "Go to aura method" button,
**********************************************************************************************************
Sample syntax of Aura:method: (Declared in child)
<aura:method name="testMethod" action="{!c.someAction}"
description="Test aura method with test parameter">
<aura:attribute name="Test1" type="String" /> <!--optional parameter-->
</aura:method>
Note:
- Aura method can have an optional parameters. We use <aura:attribute> tag in Aura:method to declare parameter.
- We do not need access system attribute in <aura:attribute> tag.
How to call aura:method from parent controller:
childComponentName.auraMethodNameInChildController("Some Value we are passing to child component attribute");
Now let us see the use with simple example,
ParentComp:
<aura:component>
<aura:attribute name="parentAttributeName" type="String" default="Parent Value"/>
<p>
{!v.parentAttributeName}
</p>
<c:ChildComp aura:id="ChildComp" /> <!-- Giving id to child comp-->
<lightning:button label="Go to aura method"
onclick="{!c.gotoAuraMethod}"/>
</aura:component>
ParentCompController.js
({gotoAuraMethod : function(component, event, helper) {
var chldComp=component.find("ChildComp"); // Finding child component
var res=chldComp.testMethod("From parent"); // Hitting aura method
component.set("v.parentAttributeName",res);
}
})
ChildComp:
<aura:component><aura:method name="testMethod" action="{!c.someAction}"
description="Test aura method with test parameter">
<aura:attribute name="childAttributeName" type="String" />
</aura:method>
</aura:component>
ChildCompController.js:
({
someAction : function(component, event, helper) {
var params=event.getParam('arguments');
if(params)
{
var param1=params.childAttributeName;
}
return param1+"Appended child value";
}
})
Application:
<aura:application extends="force:slds" >
<c:ParentComp/>
</aura:application>
Output:
**********************************************************************************************************
After previewing application,
**********************************************************************************************************
After clicking "Go to aura method" button,
**********************************************************************************************************
No comments:
Post a Comment