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
- 国内首个二代基因测序 FPGA 加速方案-背后的技术
- Java基础04 封装与接口
- Maven那点事儿(Eclipse版)
- 【Spring开发】—— Spring注入静态变量
- java判断list为空
- Java基础01 从HelloWorld到面向对象
- Java基础02 方法与数据成员
- 【Spring实战】—— 13 AspectJ注解切面
- EasyUI日期选择框
- Java基础03 构造器与方法重载
- web.xml is missing and <failOnMissingWebXml> is set to true
- 【Spring实战】—— 11 通过AOP为特定的类引入新的功能
- 使用Maven创建web项目
- 纸上谈兵: 树, 二叉树, 二叉搜索树
- JavaScript 教程
- JavaScript 编辑工具
- JavaScript 与HTML
- JavaScript 与Java
- JavaScript 数据结构
- JavaScript 基本数据类型
- JavaScript 特殊数据类型
- JavaScript 运算符
- JavaScript typeof 运算符
- JavaScript 表达式
- JavaScript 类型转换
- JavaScript 基本语法
- JavaScript 注释
- Javascript 基本处理流程
- Javascript 选择结构
- Javascript if 语句
- Javascript if 语句的嵌套
- Javascript switch 语句
- Javascript 循环结构
- Javascript 循环结构实例
- Javascript 跳转语句
- Javascript 控制语句总结
- Javascript 函数介绍
- Javascript 函数的定义
- Javascript 函数调用
- Javascript 几种特殊的函数
- JavaScript 内置函数简介
- Javascript eval() 函数
- Javascript isFinite() 函数
- Javascript isNaN() 函数
- parseInt() 与 parseFloat()
- escape() 与 unescape()
- Javascript 字符串介绍
- Javascript length属性
- javascript 字符串函数
- Javascript 日期对象简介
- Javascript 日期对象用途
- Date 对象属性和方法
- Javascript 数组是什么
- Javascript 创建数组
- Javascript 数组赋值与取值
- Javascript 数组属性和方法
- 它会不会成为OCR领域霸主?经过一个月的分析,我得出了这些结论
- 【一天一大 lee】二叉搜索树中的插入操作 (难度:中等) - Day20200930
- docker 由于iptables导致无法正常启动问题临时解决方案
- 【一天一大 lee】反转字符串 (难度:简单) - Day20201008
- 【一天一大 lee】四数之和 (难度:中等) - Day20201005
- 【一天一大 lee】两数相加 (难度:中等) - Day20201004
- 历经14天自定义3个注解解决项目的3个Swagger难题
- 【一天一大 lee】秋叶收藏集 (难度:中等) - Day20201001
- 【译文】Facebook工程师谈运维工作的未来
- 【一天一大 lee】环形链表II (难度:中等) - Day20201010
- 【西法带你学算法】一次搞定前缀和
- 一文快速入门分库分表中间件 Sharding-JDBC (必修课)
- 求求你别再用System.out.println 了!!
- 为什么阿里巴巴Java开发手册中强制要求超大整数禁止使用Long类型返回?
- 独家 | 教你用Python来计算偏差-方差权衡