Bound and UnBound Expressions

When you add a component in markup, you can use an expression to initialize attribute values in the component based on attribute values of the container component. There are two forms of expression syntax, which exhibit different behaviors for data binding between the components.

Using Delimiter  "{!}"  Makes an attribute as bound and using Hash "{#}" Makes an attribute as unbound.

When ever possible we need to use Hash "{#}" as a best practice which in turn improves performance.

Example:

<!--Bound Expression -->

    <c:ChildExp mynum="{!v.parentattribute}"/> 

<!--Unbound Expression -->

    <c:ChildExp mynum="{#v.parentattribute}"/>

This concept is a little tricky, but it will make more sense when we look at an example.

 ===================

ChildExp Markup

===================

<aura:component >

    <aura:attribute name="mynum" type="String" />

    

    <lightning:card title="Child Card" >

    <lightning:input label="Child input" value="{!v.mynum}" />

        <aura:set attribute="actions">

            <lightning:button onclick="{!c.Bckgrnd}"  label="Check Back ground data" variant="brand"/>

        

        </aura:set>

    </lightning:card>

   

    

</aura:component>

===================

ChildExp Controller

===================

({

Bckgrnd : function(component, event, helper) {

            var mydata=component.get('v.mynum');

        

}

})

===============

ParentExp Markup

================

<aura:component >

    <aura:attribute name="parentattribute" type="String" default=" I like lightning " />

    

    <lightning:card title="Parent Card" >

        

    <lightning:input value="{!v.parentattribute}" label="Parent input"/>

    </lightning:card> 

     <br/>

     <br/>

<!--Bound Expression -->

    <c:ChildExp mynum="{!v.parentattribute}"/> 

<!--Unbound Expression -->

    <c:ChildExp mynum="{#v.parentattribute}"/>

</aura:component>

===============

ParentExpApp to test the scenario

================

<aura:application extends="force:slds">

    <c:ParentExp />

</aura:application>

Initial output

After changing the data in the child input component