Find
an easy way to pass the attributes from the parent aura component to the child component in the salesforce lightning framework.
ParentComponent.js
<aura:component
implements="flexipage:availableForRecordHome"
access="global" >
<aura:attribute
name="ParentAtt"
type="String[]"
default="['red','green','blue']"/>
<div style='border: 1px solid black;
padding:20px;'>
<div>parent
component!</div>
<c:ChildComponent ParAttValue =
'{!v.ParentAtt}' />
</div>
</aura:component>
In the parent component, we have created a new attribute to store the list of strings and setting default values and also included a reference to the child component to which we are passing this list of strings from the parent component attributes as an input to the child component.
ChildComponent.js
<aura:component
implements="flexipage:availableForRecordHome"
access="global">
<aura:attribute
name="ParAttValue" type="String[]"/>
<div style='border: 1px solid black;
padding:20px;'>
<span>Child component!
</span>
<br/>
<span>list of string from the
parent are below</span>
<aura:iteration
items="{!v.ParAttValue}" var="s">
<br/>
{!s}
</aura:iteration>
</div>
</aura:component>
In the child component, we are receiving the parent attribute value as an input parameter and iterating the list of strings using aura:iteration and displaying all the values in the component.
Output
We can also use aura methods or events to communicate between the components in the Salesforce lightning framework. In case of any doubts, please feel free to add it in the comments section below.
0 Comments