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/wu-kai/
本文欢迎转载,但未经作者同意必须保留此段声明,且在文章页面明显位置给出原文连接