There could be multiple solutions for this, I will explain here how you can use "aura:attribute" & "Application event" to pass the data from Parent component to Child component.
Method 1 : Using aura:attribute
In below example I am passing the variable to the child component using the aura:attribute on the button's click of the Parent Component.
ParentComponent.cmp
1 2 3 4 5 6 7 8 9 10 | <aura:component implements="force:appHostable,flexipage:availableForAllPageTypes,flexipage:availableForRecordHome,force:hasRecordId,forceCommunity:availableForAllPageTypes,force:lightningQuickAction" access="global" > <aura:attribute name="parentValue" type="String" /> <h1>Hello, I am Parent Component</h1> <div class="row"> <lightning:button label="Send value to child" iconName="utility:comments" iconPosition="left" variant="brand" onclick="{! c.sendValue }" /> </div> <br/> <br/> <c:ChildComponent childValue="{!v.parentValue}" /> </aura:component> |
ParentComponentController.js
1 2 3 4 5 | ({ sendValue : function(component, event, helper) { component.set("v.parentValue","I am value from Parent"); } }) |
ChildComponent.cmp
1 2 3 4 5 | <aura:component implements="force:appHostable,flexipage:availableForAllPageTypes,flexipage:availableForRecordHome,force:hasRecordId,forceCommunity:availableForAllPageTypes,force:lightningQuickAction" access="global" > <aura:attribute name="childValue" type="String" /> <h1>Hello, I am Child Component. Here is the value from Parent : {!v.childValue}</h1> </aura:component> |
Method 2 : Using Application Event
In below example I am passing the variable to the child component using the Application Event on the button's click of the Parent Component.
ParentChildEvent.evt
1 2 3 | <aura:event type="APPLICATION"> <aura:attribute name="parentVar" type="String"/> </aura:event> |
ParentComponent.cmp
1 2 3 4 5 6 7 8 9 10 | <aura:component implements="force:appHostable,flexipage:availableForAllPageTypes,flexipage:availableForRecordHome,force:hasRecordId,forceCommunity:availableForAllPageTypes,force:lightningQuickAction" access="global" > <aura:registerEvent name="dataTransfer" type="c:ParentChildEvent"/> <h1>Hello, I am Parent Component</h1> <div class="row"> <lightning:button label="Send value to child" iconName="utility:comments" iconPosition="left" variant="brand" onclick="{! c.sendValue }" /> </div> <br/> <br/> <c:ChildComponent /> </aura:component> |
ParentComponentController.js
1 2 3 4 5 6 7 | ({ sendValue : function(component, event, helper) { var appEvent = $A.get("e.c:ParentChildEvent"); appEvent.setParams({"parentVar":"Hello I am value from Parent"}); appEvent.fire(); } }) |
ChildComponent.cmp
1 2 3 4 5 6 | <aura:component implements="force:appHostable,flexipage:availableForAllPageTypes,flexipage:availableForRecordHome,force:hasRecordId,forceCommunity:availableForAllPageTypes,force:lightningQuickAction" access="global" > <aura:handler action="{!c.getEvents}" event="c:ParentChildEvent" /> <aura:attribute name="childValue" type="String" /> <h1>Hello, I am Child Component. Here is the value from Parent : {!v.childValue}</h1> </aura:component> |
ChildComponentController.js
1 2 3 4 5 6 | ({ getEvents : function(component, event, helper) { var evtValue = event.getParam("parentVar"); component.set("v.childValue",evtValue); } }) |
Please check below links also and subscribe if you like the content :
- Lemonade Stand Application in Salesforce.
- How to send WhatsApp from Salesforce Lightning Component ?
- Use ZAPIER with Salesforce.
- Create Surveys in Salesforce.
- Line Clamp in Lightning Component.
- How to get Parent Id from encoded URL in Lightning Component ?
- How to add sorting in Lightning Data Table ?
- How to Send SMS from Salesforce ?
- How to Add Star Ratings in Salesforce ?
If you have any question please leave a comment below.
If you would like to add something to this post please leave a comment below.
Share this blog with your friends if you find it helpful somehow !
Thanks
Keep Coding 😊
2 Comments
Please make it readable, your code snippets are very difficult to read.
ReplyDeleteHi I have updated it, it was due to recent theme change. Thanks for letting me know !
Delete