Salesforce學習之路（十一）Aura組件屬性

 1. <aura:attribute />語法

Aura組件屬性相似與Apex中類的成員變量（或者說Java中類的成員變量）。他們是組件在特定的實例上設置的類型化字段，可使用表達式語法從組件的標記內引用他們。

語法：<aura:attribute name="**" type="**" default="**" required="true/false" access="**" description="**"> 

• name：必要字段，屬性的名稱
• type：必要字段，屬性的類型，支持的類型見下面的「屬性type支持的類型」
• default：非必要字段，默認值類型與type一致。
• required：非必要字段，標記該屬性是否爲必須字段。true：表該字段爲必要字段；false：表該字段爲非必要字段。
• access: 非必要字段，表該屬性是否可被所屬命名空間以外使用。public(默認)：全部命名空間皆可用；global：應用內可以使用；private: 組件內可以使用。
• description: 非必要字段，對該屬性進行簡單的描述。

示例：

<aura:component>
    <aura:attribute name="whom" type="String" default="world"/>
    Hello {!v.whom}!
</aura:component>

2. 屬性命名規則：

• 必須以字母或者下劃線開頭
• 必須僅包含字母，數字，下劃線字符

示例：

<!--正確-->
<aura:attribute name="test" type="String" />
<aura:attribute name="_test" type="String" />
<aura:attribute name="__123" type="String" />

<!--錯誤-->
<!--數字開頭-->
<aura:attribute name="1test" type="String" />
<!--含有特殊字符-->
<aura:attribute name="test#" type="String" />

3. 屬性type支持的類型

<aura:attribute />支持的類型有如下幾種：基礎類型，函數類型，對象類型，標準和自定義對象類型，集合類型，Apex Class類型，指定框架類型。

• 基礎類型

類型	示例	描述
Boolean	<aura:attribute name="showDetail" type="Boolean" />	值爲true/false
Date	<aura:attribute name="startDate" type="Date" />	日期類型，格式爲：yyyy-mm-dd。hh:mm:ss沒有保存。
DateTime	<aura:attribute name="lastModifiedDate" type="DateTime" />	日期類型，對應時間戳格式。 保存了除了日期，還保存了時間，而且精確到毫秒。
Decimal	<aura:attribute name="totalPrice" type="Decimal" />	十進制，能夠包括小數部分。對應Java.math.BigDecimal，精度高於Double類型。 針對貨幣字段，通常選擇該類型。
Double	<aura:attribute name="widthInchesFractional" type="Double" />	Double類型，能夠包含小數位。對應Java.lang.Double。
Integer	<aura:attribute name="numRecords" type="Integer" />	整數類型，不包含小數位。對應Java.lang.Integer。
Long	<aura:attribute name="numSwissBankAccount" type="Long" />	長整型，不包含小數位。對應Java.lang.Long。
String	<aura:attribute name="message" type="String" />	字符串類型。

示例：

<aura:attribute name="favoriteColors" type="String[]" default="['red','green','blue']" />

• 函數類型

屬性的類型能夠對象Javascript中的某個函數。若是子組件具備該類型的屬性，可傳遞迴調函數給父組件。

示例：

<aura:attribute name="callback" type="Function" />

注意：該類型不適用於服務端，僅在客戶端使用。

• 對象類型

該類型的屬性對應一個對象。

示例：

<aura:attribute name="data" type="Object" />

注意：通常狀況下，不建議使用該類型。object類型的屬性在傳遞至服務端時，會將全部的東西序列化爲字符串，此時若是使用深度表達（例如：v.data.property），則會拋出字符串沒有該屬性異常。所以，儘可能使用type="Map"，防止出現反序列化等問題。

• 標準或自定義對象類型

屬性支持標準或自定義對象的類型。

示例：

<!--標準對象-->
<aura:attribute name="account" type="Account" /> 
<!--自定義對象-->
<aura:attribute name="employee" type="Employee__c" />

注意：用戶至少對該對象具備讀取權限，不然組件雖然不會報錯，可是頁面不會加載。

• 集合類型

下面爲支持的集合類型：

類型	示例	描述
type[](Array)	<aura:attribute name="colorPalette" type="String[]" default="['red', 'green', 'blue']" />	自定義數組
List	<aura:attribute name="colorPalette" type="List" default="['red', 'green', 'blue']" />	有序的列表
Map	<aura:attribute name="sectionLabels" type="Map" default="{ a: 'label1', b: 'label2' }" />	key:value集合。key不可重複。 若是不設置默認值，則在Javascript中默認設爲null。 若是想設置空值，可寫爲：default="{}"
Set	<aura:attribute name="collection" type="Set" default="['red', 'green', 'blue']" />	集合，無序，不含重複元素。

示例：

<!--這裏使用type[]類型-->
<aura:attribute name="displayMonth" type="String[]" default="['6', '12']" />

• Apex Class類型

該類型屬性對應一個Apex類。

示例：

存在某個自定義Apex類：DemoAuraController.cls

<!--存在名爲：DemoAuraController.cls的Apex類-->
<aura:attribute name="data" type="DemoAuraController" />

注意：type類型大小寫不敏感，例如這裏能夠寫成demoauracontroller。

• 指定框架類型

下面爲支持的指定框架類型：

類型	示例	描述
Aura:component	N/A	一個單獨的組件。 相比較而言，官方推薦使用Aura:component[]類型。
Aura:component[]	<aura:component> <aura:attribute name="detail" type="Aura.Component[]"> <p>default paragraph1</p> </aura:attribute> Default value is: {!v.detail} </aura:component>	利用該類型能夠設置一個類型塊。
Aura.Action	<aura：attribute name =「 onclick」 type =「 Aura.Action」 />	使用此類型，能夠將action傳遞給組件。

4. 實例分析

sample.cmp

<aura:component controller="TestAuraController" 
                implements="force:appHostable,flexipage:availableForAllPageTypes"
                access="global">

    <aura:attribute name="whom" type="String" default="world" />

    <!--組件初始化操做-->
    <aura:handler name="init" value="{!this}" action="{!c.handleInit}" />
    <div>
    <!--按鈕組件，label爲界面顯示值；onclick: 點擊按鈕時觸發controller.js中applyHandle函數-->
    <!--display: true表示按鈕灰掉，沒法操做；false表示正常工做-->
        <lightning:button label="Apply" onclick="{!c.applyHandle}" disabled="false" />
    </div>
</aura:component>

sampleController.js

({
    handleInit: function (cmp, event, helper) {
        // 初始化組件時，將whom默認值打印值控制檯
        console.log("init whom: " + cmp.get('v.whom'));
    },

    applyHandle: function (cmp, event, helper) {
        // 點擊Apply按鈕時，更新whom值，並打印到控制檯
        cmp.set('v.whom', 'updated');
        console.log("apply whom: " + cmp.get('v.whom'));
    }
})

結果分析：

#初始化：
init whom: world
#點擊apply按鈕：
apply whom: updated

---

做者：吳家二少

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

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