6

Currently I'm struggling with such problem. I want to decompose complex component into 3 parts. The main reason is to separate long blocks of code. Therefore I need a way for parent component to access child component attribute values.

Is there any way to do it? Additionally do you know a good place to look for some tips on communication between components?

Example:

PARENT COMPONENT

<aura:component controller="LC01_MultiCriteriaSearch">
   <c:LC01_MultiCriteriaSearch_Scope/>
   <c:LC01_MultiCriteriaSearch_Criteria/>
   <c:LC01_MultiCriteriaSearch_NestedCriteria/>
   ...
</aura:component>

SCOPE COMPONENT

<aura:component controller="LC01_MultiCriteriaSearch">
  <aura:attribute name="scope" type="String"/>
  ...
</aura:component>

CRITERIA COMPONENT

<aura:component controller="LC01_MultiCriteriaSearch">
  <aura:attribute name="criteria" type="String"/>
  ...
</aura:component>

NESTED CRITERIA COMPONENT

<aura:component controller="LC01_MultiCriteriaSearch">
  <aura:attribute name="nestedCriteria" type="String"/>
  ...
</aura:component>

So here -> in parent component I'd like to access scope attribute from scope component, cirteria from cirteria and nested criteria from nested criteria comonent.

1

The effective mechanism by which two components can work is by using Events .Lightning framework works on Event driven paradigm .

You will have a Publisher component that will publish event and you will have a listener that will listen to the events and handle the events .

An excellent blogs from this is below

https://developer.salesforce.com/blogs/developer-relations/2015/03/lightning-component-framework-custom-events.html

http://bobbuzzard.blogspot.com/2015/05/lightning-component-events.html

Observe how easy it is to create events for a component

 <aura:event type="APPLICATION" description="Search Event">
  <aura:attribute name="term" type="String" />
 </aura:event>

Like OOPS you can also use concept of interface and implement the interface

To use an interface, you must implement it. An interface can't be used directly in markup otherwise.

Set the implements system attribute in the aura:component tag to the name of the interface that you are implementing.

For example: aura:component implements="mynamespace:myinterface"

A component can implement an interface and extend another component. aura:component extends="ns1:cmp1" implements="ns2:intf1"

An interface can extend multiple interfaces using a comma-separated list. aura:interface extends="ns:intf1,ns:int2"

  • Thank you Mohith, I am familiar with event paradigm, not to fluent yet though. I will dive into it. Thank you for the links provided. – Maciek Simm Jun 24 '15 at 12:45
9

You can do this by defining the attributes in your top level component and then passing these down to your nested components. That way, when the nested component updates the attribute value, it will be immediately reflected in the parent component :

<aura:component controller="LC01_MultiCriteriaSearch">
   <aura:attribute name="scope" type="String" />
   <aura:attribute name="criteria" type="String" />
   <aura:attribute name="nestedCriteria" type="String" />
   <c:LC01_MultiCriteriaSearch_Scope scope="{!v.scope}" />
   <c:LC01_MultiCriteriaSearch_Criteria criteria="{!v.criteria}" />
   <c:LC01_MultiCriteriaSearch_NestedCriteria criteria="{!v.nestedCriteria}" />
   ...
</aura:component>

If you want to see some code that demonstrates this working for strings up and down through three levels, see :

Lightning Components - SObject attribute change event only sent to descendants

the code was actually demonstrating an issue around sobjects attribute propagation, but strings worked right off the bat.

  • 1
    Thanks Bob! I'm honored to get answer from you :-). This is really simple, and what I was looking for! – Maciek Simm Jun 24 '15 at 12:44

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.