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/

本文欢迎转载，但未经作者同意必须保留此段声明，且在文章页面明显位置给出原文连接