DATA FLOWS IN AURA COMP

In Aura Components, data Flows with the help of Attributes and Events(Link of Events in Aura Component)

Suppose you created an attribute that means a variable, so either you provide a value or set a value by any other way here. I’m going to show you How you can set value in an attribute.

BY HANDLER (INIT)

<aura:component implements=”force:appHostable,
flexipage:availableForAllPageTypes,
flexipage:availableForRecordHome,
force:hasRecordId,forceCommunity:availableForAllPageTypes,force:lightningQuickAction” 
access=”global” >

   <h1>HELLO WORLD</h1>

   <aura:handler name=”init” 
action=”{!c.myAction}” value=”{!this}”/>

<aura:attribute type=”string” name=”message”/>HII  {!v.message}
</aura:component>

HANDLER – 

({
doInit : function(component, event, helper) 
{component.set(‘v.message,’World’);}
})

All Aura Handlers need attributes with name and value for component events and events in the case of Application events where the name is predefined for system events like init so that Aura Handler will know automatically which event to attach the handler where the values equal {!this}

So doInit function in the controller set the attribute value as World.

ON USER CLICK

<aura:component implements=”force:appHostable,
flexipage:availableForAllPageTypes,
flexipage:availableForRecordHome,
force:hasRecordId,forceCommunity:availableForAllPageTypes,force:lightningQuickAction” 
access=”global” >

   <h1>HELLO WORLD</h1>

<aura:attribute type=”string” name=”message”/>
<lighting:component label=”Change Value” 
variant=”brand” onclick=”{!c.changeValue}”


HII  {!v.message}

</aura:component>

HANDLER – 

({
changeValue : function(component, event, helper) 
{component.set(‘v.message,’World’);}
})

This Component will change the value of the message attribute when the user clicks on the button, i.e., change value.