Sign Up ›

Browse by Topic
ShowAll Questionssorted byDate Posted
+ Start a Discussion
Fred13Fred13 

How to Pass data from one Component to another

I have a component that display a listing of records.  When clicking a button on that list, I am opening a second component.   The first component will pass data to the first component to clone the record.  What is the best way to do this?  I think that I would need to use an event but then I saw some posts (that I could not fully understand) that talked about the concept of parent and child components.

I'm just trying to find the best way to open the second component and pre-populate values.  The record will be saved and the user should be directed back to the original component.

thanks!!

Fred
Raj VakatiRaj Vakati
Use lightning:isUrlAddressable  interface ...


The lightning:isUrlAddressable interface extends the lightning:hasPageReference interface. A component that implements lightning:isUrlAddressable then gets access to the page state through the pageReference attribute. The page state is a representation of the current URL query parameters.


Suppose 

hellp.cmp
  
<aura:component description="c:hello component">
    <aura:attribute name="pageReference" type="Object"/>
 <aura:attribute name="recrodId" type="String"/> 
    <aura:handler name="init" value="{! this }" action="{! c.init }"/>
    <lightning:navigation aura:id="navService"/>
    <lightning:button label="Navigate" onclick="{!c.handleClick}"/>
</aura:component>

({
    init : function(component, event, helper) {
        var pageReference = {
            type: 'standard__component',
            attributes: {
                componentName: 'c__helloTarget',
            },
            state: {
                "c__firstname": "John",
 "recordId": component.get("v.record"); 
            }
        };
        component.set("v.pageReference", pageReference);
     },
     handleClick: function(component, event, helper) {
        var navService = component.find("navService");
        var pageReference = component.get("v.pageReference");
        event.preventDefault();
        navService.navigate(pageReference);
    }
})

c__helloTarget.cmp
  
<aura:component implements="lightning:isUrlAddressable" description="c:helloTarget component">
    <aura:attribute name="recordId" type="String" />
    <aura:handler name="init" value="{!this}" action="{!c.init}"/>
    Hello {!v.recordId}.
    
</aura:component>
  
init: function(cmp, evt, helper) {
        var myPageRef = cmp.get("v.pageReference");
        var recordId= myPageRef.state.recordId;
        cmp.set("v.recordId", recordId);
    },


 
Fred13Fred13
Thanks for responding.  I'm trying to implement your solution.  I have a question.  For the line:

"recordId": component.get("v.record");

I don't have a "record" attribute on teh component so trying to figure out where this is coming from?  I get an error that it does not exist.  thanks!!

Fred
Raj VakatiRaj Vakati
Sorry it my tpypo mistake .. 

You can do two ways 
  1. Create a new attribute for recordTYpe
  2. Or implement force:recordId intrerface so that record id will be innhertied