How to Communicate Between Two Salesforce Lightning Component Using Attributes?

How to communicate between two Salesforce Lightning Components using attributes?

Communication between the two Salesforce Lightning Components simply means the transfer of data from the child component to parent component or from parent component to child component. Any lightning component cannot communicate directly with its parent component and vice-versa. Any component cannot control other components using standard javascript. Component communication has to be defined by the programmer.

Salesforce Lightning Components communication can be done in two ways:

1. Using Attributes or Methods to transfer data from parent to child component.
2. Using Events for Data Transfer from child to parent component.

Here we will discuss component communication using attributes.

A snippet of code for passing parent attribute value to child attribute:

1. 1. Parent Component :

      <aura:component access="global">
          <aura:attribute name="parentAttribute" type="String" default='test'/>
          <c:ChildComponent childAttribute="{!v.parentAttribute}"/>
      </aura:component>

   2. Child Component:

      <aura:component access="global">
          <aura:attribute name="childAttribute" type="String"/>
          <table class="slds-table ">
              <tr>
                  <td>
                      <div class="topSpacing">
                          <label class="slds-form-element__label ">Name</label>
                      </div>
                      <div class="width">
                          <ui:outputText class="slds-output" value="{!v.childAttribute}"></ui:outputText>
                      </div>
                  </td>
              </tr>
          </table>
      </aura:component>

   3. Lightning Application

      <aura:application extends="force:slds"><c:ParentComponent/> </aura:application>

      Your component UI looks like the below screenshot. Here we are passing default value for a parent component to the child component.