Salesforce学习之路（十一）Aura组件属性<aura:attribute />

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/

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

原文地址：https://www.cnblogs.com/cloudman-open/p/11897394.html