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

时间:2019-11-20
本文章向大家介绍Salesforce学习之路(十一)Aura组件属性<aura:attribute />,主要包括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类型,指定框架类型。

  • 基础类型
类型 示例 描述
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/

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

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