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/

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