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型別，指定框架型別。

• 基礎型別

示例：

<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[]型別-->
<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>
    <aura:attribute name="detail" type="Aura.Component[]">
    <p>default paragraph1</p>
    </aura:attribute>
    Default value is: {!v.detail}
</aura:component>

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/

本文歡迎轉載，但未經作者同意必須保留此段宣告，且在文章頁面明顯位置給出原文