Salesforce學習之路（十二）Aura組件表達式

 

1. 表達式語法

在上篇文章組件屬性示例中，新建了一個屬性whom, 引用該屬性時使用了表達式：{!v.whom}，負責該屬性的動態輸出。

語法：{!expression}

上述示例中，咱們的屬性名稱定義爲whom，v表示視圖（View)。當組件使用時，表達式的值將被評估而且動態替換。

注意：表達式區分大小寫。空格忽略。若是自定義字段爲myNamespace__Amount__c，要獲取該屬性值，必須寫爲：{!v.myObject.myNamespace__Amount__c}

1.1 表達式動態輸出

利用表達式是最簡單的值動態輸出方式。

表達式的值能夠來自：component屬性，具體的數字，布爾值等。

示例：

component屬性：{!v.whom} ==> 輸出屬性名爲whom的值
文字值：{!123}， {!'abc'} ==> 輸出分別爲：123， abc
布爾值：{!true}， {!false} ==> 輸出分別爲：true，false

注意：文字值中，「!」後面能夠直接跟數字值，若是是字符則須要用單引號' '包起來，不包含則組件不會加載，用雙引號會報錯。

1.2 條件表達式

1）三元表達式

與全部語言同樣，這裏也支持三元表達式，想必你們對三元表達式的概念都很清楚，這裏就再也不解釋了。

示例：

{!v.displayMonth == '' ? 'No value' : 'Has value'} 
displayMonth屬性值不爲空字符，打印：Has value;
displayMonth屬性值爲空字符，打印：No value

2）<aura:if>標記 

相似與Java中if-else

示例：

<aura:component>
    <aura:attribute name="read" type="Boolean" default="false" />
    <aura:if isTrue="{!v.read}">
        you can read it.
        <aura:set attribute="else">
            you cannot read it.
        </aura:set>
    </aura:if>
</aura:component>   

read屬性值爲：true，打印：you can read it.

read屬性值爲：false，打印：you cannot read it.

1.3 不一樣組件間數據綁定

當咱們在在一個View中添加另外一個組件，能夠在父組件中初始化子組件的屬性值。目前有兩種語法格式：

語法1: <c:childComponent childAttr="{!v.parentAttr}" />

綁定語法，將父組件中的parentAttr屬性和子組件的childAttr屬性關聯，初始化時將parentAttr的值傳遞給childAttr。運行中修改任意一個屬性，都會致使另一個屬性值的改變。

示例：

parentAura.cmp

<!--Parent component-->
<aura:component access="global">
    <aura:attribute name="parentAttr" type="String" default="Parent Attribute" />
    <!--實例化childAura組件-->
    <c:childAura childAttr="{!v.parentAttr}" />
    <br/>
    parentAttr in parent: {!v.parentAttr}
    <div style="background:white">      
        <lightning:button label="Apply" onclick="{!c.applyHandle}" disabled="false" />
    </div>
</aura:component>

parentAuraController.js

({
    applyHandle: function (cmp, event, helper) {
        cmp.set('v.parentAttr', 'Parent update');
    }
})

childAura.cmp

<!--Child component-->
<aura:component>
    <aura:attribute name="childAttr" type="String" default="Child Attribute"/>    
    <div class="slds-p-top--large" tyle="background:white">
        childAttr in child: {!v.childAttr}
        <lightning:button label="Apply" onclick="{!c.applyHandle}" disabled="false" />
    </div>
</aura:component>    

childAuraController.js

({
    applyHandle : function(component, event, helper) {
        component.set('v.childAttr', 'Child update');
    }
})

output:

childAttr in child: Parent Attribute
parentAttr in parent: Parent Attribute

點擊childAura組件的apply按鈕
childAttr in child: Child update
parentAttr in parent: Child update

點擊parentAura組件的apply按鈕
childAttr in child: Parent update
parentAttr in parent: Parent update

語法2: <c:childComponent childAttr="{#v.parentAttr}" />

非綁定語法，將父組件中的parentAttr屬性和子組件的childAttr屬性關聯，初始化時將parentAttr的值傳遞給childAttr。運行中修改任意一個屬性，只改變當前屬性值，不會修改另一個屬性值。

示例：

parentAura.cmp

<!--Parent component-->
<aura:component access="global">
    <aura:attribute name="parentAttr" type="String" default="Parent Attribute" />
    <!--實例化childAura組件-->
    <c:childAura childAttr="{#v.parentAttr}" />
    <br/>
    parentAttr in parent: {!v.parentAttr}
    <div style="background:white">      
        <lightning:button label="Apply" onclick="{!c.applyHandle}" disabled="false" />
    </div>
</aura:component>

parentAuraController.js

({
    applyHandle: function (cmp, event, helper) {
        cmp.set('v.parentAttr', 'Parent update');
    }
})

childAura.cmp

<!--Child component-->
<aura:component>
    <aura:attribute name="childAttr" type="String" default="Child Attribute"/>    
    <div class="slds-p-top--large" tyle="background:white">
        childAttr in child: {!v.childAttr}
        <lightning:button label="Apply" onclick="{!c.applyHandle}" disabled="false" />
    </div>
</aura:component>   

childAuraController.js

({
    applyHandle : function(component, event, helper) {
        component.set('v.childAttr', 'Child update');
    }
})

output:

childAttr in child: Parent Attribute
parentAttr in parent: Parent Attribute
點擊childAura組件的apply按鈕
childAttr in child: Child update
parentAttr in parent: Parent Attribute
點擊parentAura組件的apply按鈕
childAttr in child: Child update
parentAttr in parent: Parent update

---

 

做者：吳家二少

博客地址：https://www.cnblogs.com/cloudman-open/

本文歡迎轉載，但未經做者贊成必須保留此段聲明，且在文章頁面明顯位置給出原文鏈接