Salesforce学习之路-developer篇（五）Aura组件原理及常用属性

引用自定义对象
• 引用标准对象和自定义对象的字段
• 引用Apex的控制类

引用自定义创建的组件
• 引用自定义创建的事件
• 引用自定义对象
• 引用标准对象和自定义对象的字段
• 引用Apex的控制类
• 引用静态资源

3.2 命名空间命名规则

命名规则必须满足以下条件：

• 以字母开头
• 包含1-15个字母数字字符
• 不包含两个下划线

例如： myNamespace123和my_namespace是有效的；123MyNamespce和my__namespace是无效的。

3.3 创建命名空间

Setup-->Packages（注意：该条目只在Salesforce Classic版本中才有）-->Developer Settings-->Edit

Check Avaliability校验名称是否满足规则。

3.4 命名空间使用示例

• Org没有设置命名空间前缀

<aura:attribute name="newExpense" type="Expense__c"
default="{ 'sobjectType': 'Expense__c',
'Name': '',
'Amount__c': 0,
…
}" />

updateTotal: function(component) {
…
for(var i = 0 ; i < expenses.length ; i++){
var exp = expenses[i];
total += exp.Amount__c;
}
…
}

var myCmp = $A.createComponent("c:myComponent", {},
function(myCmp) { }
);

• Org设置了命名空间前缀

<aura:attribute name="newExpense" type="yournamespace__Expense__c"
default="{ 'sobjectType': 'yournamespace__Expense__c',
'Name': '',
'yournamespace__Amount__c': 0,
…
}" />

updateTotal: function(component) {
…
for(var i = 0 ; i < expenses.length ; i++){
var exp = expenses[i];
total += exp.yournamespace__Amount__c;
}
…
}

var myCmp = $A.createComponent("yournamespace:myComponent",
{},
function(myCmp) { }
);

4 组件的主体

4.1 配置项

在创建Aura组件时，可在该文件中配置组件的配置选项。配置选项都是可选的，所以可以进行任意组合。

在Aura组件中提供如下配置项：

示例：

<aura:component implements="force:appHostable,flexipage:availableForAllPageTypes">
</aura:component>

4.2 组件属性

组件属性类似与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>

1) 属性命名规则：

• 必须以字母或者下划线开头
• 必须仅包含字母数字或者下划线字符

2) 属性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="acct" type="Account" />
<aura:attribute name="expense" type="Expense__c" />

注意：用户至少对该对象具有读取权限，否则组件不会加载。

• 集合类型

下面为支持的集合类型：

示例：

<aura:component controller="TestAuraController" access="global">
<aura:attribute name="selectedDisplayMonth" type="String" default="6 Months,12 Months,18 Months,24 Months,36 Months" />
<aura:iteration items="{!v.displayMonths}" var="displayMonth">
{!displayMonth}
</aura:iteration>
</aura:component >

• Apex Class类型

该类型属性对应一个Apex类。

示例：

存在某个自定义Apex类：TestAura、

<aura:attribute name="color" type="docSampleNamespace.TestAura" />

• 指定框架类型

下面为支持的指定框架类型：

<aura:component>
<aura:attribute name="detail" type="Aura.Component[]">
<p>default paragraph1</p>
</aura:attribute>
Default value is: {!v.detail}
</aura:component>

4.3 表达式

在3.4.2的组件属性示例中，新建了一个属性whom, 引用该属性时使用了表达式：{!v.whom}，负责该属性的动态输出。

语法：{!expression}

上述示例中，我们的属性名称定义为whom，v表示视图（View)。当组件使用时，表达式的值将被评估并且动态替换。

注意：表达式区分大小写。空格忽略。如果自定义字段为myNamespace__Amount__c，要获取该属性值，必须写为：{!v.myObject.myNamespace__Amount__c}

1) 表达式动态输出

利用表达式是最简单的值动态输出方式。

表达式的值可以来自：component属性，具体的数字，布尔值等。

示例：

component属性：{!v.whom} ==> 输出属性名为whom的值
文字值：{!123}， {!'abc'} ==> 输出分别为：123， abc
布尔值：{!true}， {!false} ==> 输出分别为：true，false

注意：文字值中，“!”后面可以直接跟数字值，如果是字符则需要用单引号' '包起来，不包含则组件不会加载，用双引号会报错。

2) 条件表达式

• 三元表达式

与所有语言一样，这里也支持三元表达式，想必大家对三元表达式的概念都很清楚，这里就不再解释了。

示例：

{!v.displayMonth == '' ? 'No value' : 'Has value'} 
displayMonth属性值不为空字符，打印：Has value;
displayMonth属性值为空字符，打印：No value

• <aura:if>标记 

类似与Java中if-else

示例：

<aura:component>
<aura:attribute name="read" type="Boolean" default="false" />
<aura:if isTrue="{!v.read}">
you can read it.
<aura:set attribute="else">
you cannot read it.
</aura:set>
</aura:if>
</aura:component>

read属性值为：true，打印：you can read it.

read属性值为：false，打印：you cannot read it.

3) 不同组件间数据绑定

当我们在在一个View中添加另一个组件，可以在父组件中初始化子组件的属性值。目前有两种语法格式：

语法1: <c:childComponent childAttr="{!v.parentAttr}" />

绑定语法，将父组件中的parentAttr属性和子组件的childAttr属性关联，初始化时将parentAttr的值传递给childAttr。运行中修改任意一个属性，都会导致另外一个属性值的改变。

示例：

parentAura.cmp

<!--Parent component-->
<aura:component access="global">
<aura:attribute name="parentAttr" type="String" default="Parent Attribute" />
<!--实例化childAura组件-->
<c:childAura childAttr="{!v.parentAttr}" />
<br/>
parentAttr in parent: {!v.parentAttr}
<div style="background:white">
<lightning:button label="Apply" onclick="{!c.applyHandle}" disabled="false" />
</div>
</aura:component>

parentAuraController.js

({
applyHandle: function (cmp, event, helper) {
cmp.set('v.parentAttr', 'Parent update');
}
})

childAura.cmp

<!--Child component-->
<aura:component>
<aura:attribute name="childAttr" type="String" default="Child Attribute"/>
<div class="slds-p-top--large" tyle="background:white">
childAttr in child: {!v.childAttr}
<lightning:button label="Apply" onclick="{!c.applyHandle}" disabled="false" />
</div>
</aura:component>

childAuraController.js

({
applyHandle : function(component, event, helper) {
component.set('v.childAttr', 'Child update');
}
})

output:

childAttr in child: Parent Attribute
parentAttr in parent: Parent Attribute

点击childAura组件的apply按钮
childAttr in child: Child update
parentAttr in parent: Child update

点击parentAura组件的apply按钮
childAttr in child: Parent update
parentAttr in parent: Parent update

语法2: <c:childComponent childAttr="{#v.parentAttr}" />

非绑定语法，将父组件中的parentAttr属性和子组件的childAttr属性关联，初始化时将parentAttr的值传递给childAttr。运行中修改任意一个属性，只改变当前属性值，不会修改另外一个属性值。

示例：

parentAura.cmp

<!--Parent component-->
<aura:component access="global">
<aura:attribute name="parentAttr" type="String" default="Parent Attribute" />
<!--实例化childAura组件-->
<c:childAura childAttr="{#v.parentAttr}" />
<br/>
parentAttr in parent: {!v.parentAttr}
<div style="background:white">
<lightning:button label="Apply" onclick="{!c.applyHandle}" disabled="false" />
</div>
</aura:component>

parentAuraController.js

({
applyHandle: function (cmp, event, helper) {
cmp.set('v.parentAttr', 'Parent update');
}
})

childAura.cmp

<!--Child component-->
<aura:component>
<aura:attribute name="childAttr" type="String" default="Child Attribute"/>
<div class="slds-p-top--large" tyle="background:white">
childAttr in child: {!v.childAttr}
<lightning:button label="Apply" onclick="{!c.applyHandle}" disabled="false" />
</div>
</aura:component>

childAuraController.js

({
applyHandle : function(component, event, helper) {
component.set('v.childAttr', 'Child update');
}
})

output:

childAttr in child: Parent Attribute
parentAttr in parent: Parent Attribute
点击childAura组件的apply按钮
childAttr in child: Child update
parentAttr in parent: Parent Attribute
点击parentAura组件的apply按钮
childAttr in child: Child update
parentAttr in parent: Parent update

4.4 访问控制

Aura框架可以通过access属性自由的控制应用，组件，属性，接口，事件，方法的访问权限。access属性指定资源是否可以被所在命名空间之外使用。

使用范围

可在如下tag中使用access属性：

• <aura:application>
• <aura:component>
• <aura:attribute>
• <aura:interface>
• <aura:event>
• <aura:method>

access的值

• private: 可在应用，组件，接口，事件或者方法中使用， 不能被外部资源使用（命名空间）。
• 该值可以在<aura:attribute>或<aura:method>中使用。
• 将属性标记为private会使得将来重构变得更加简单（毕竟作用域小，所引发的影响也更小）。
• 除了在声明该属性的组件，其他组件调用该属性时会返回undefined错误，所以即使继承自该组件的子组件也不可访问。

在当前org中都可以访问。access的默认值便是public。

在所有的org中都可以访问。

应用访问控制

access在aura:application标签中控制app是否可被所在命名控制之外访问。

组件访问控制

access在aura:component标签中控制app是否可被所在命名控制之外访问。

属性访问控制

access在aura:attribute标签中控制app是否可被所在命名控制之外访问。 

接口访问控制

access在aura:interface标签中控制app是否可被所在命名控制之外访问。 

事件访问控制

access在aura:event标签中控制app是否可被所在命名控制之外访问。 

示例：

<aura:component access="global">
...
</aura:component>

4.5 组件标记

在捆绑包中，以.cmp为后缀的文件称为标记（Markup，可以理解为视图），是捆绑包中唯一的必要资源，所以最精简的捆绑包只包含一个.cmp文件即可。

标记可以包含文本或其他组件的引用，当然也可以声明当前组件的元数据。

Hello, World！示例：

<aura:component>
Hello, world!
</aura:component>

在<aura:component>标签中包含“Hello, world!”文本，当引用该组件时，会打印出“Hello, world”

在markup中集成了绝大多数HTML的标签，例如<div>, <span>以及<br>等等。（也支持HTML5标签）

示例：

<aura:component>
<div class="container">
<!--Other HTML tags or components here-->
</div>
</aura:component>

4.6 css样式

组件的样式，我们一般在.css后缀文件中定义。

组件中的所有顶级元素都添加了一个特殊的.THIS CSS类，将命名空间添加到CSS文件中，可以有效防止当前组件的CSS样式被其他组件的CSS文件覆盖。如果CSS文件不按照该格式编写，框架会抛错误。

示例：

testAura.cmp

<aura:component>
<!--使用CSS中.THIS .WHITE类-->
<div class="white">
Hello, world!
</div>

<!--顶级元素使用.THIS类-->
<h2>Check out the style in this list.</h2>

<div>
<!--使用.THIS .RED类-->
<li class="red">I'm red.</li>
<!--使用.THIS .BLUE类-->
<li class="blue">I'm blue.</li>
<!--使用.THIS .GREEN类-->
<li class="green">I'm green.</li>
<!--没有指定，使用当前模块样式-->
<li>I'm default.</li>
</div>
</aura:component>

testAura.css

.THIS {
background-color: grey;
}

.THIS.white {
background-color: white;
}

.THIS .red {
background-color: red;
}

.THIS .blue {
background-color: blue;
}

.THIS .green {
background-color: green;
}

输出：

分析：从产生的结果来看，<h2>是顶级元素，直接使用了.css文件中.THIS类得到灰色背景；“I'm default”没有指定颜色，使用当前模块<div>的样式，而<div>是顶级元素，所以使用.THIS类得到灰色背景；其他的指定CSS类，显示对应样式。

5. 实战案例分析

5.1 Parent组件

parentAura.cmp

<!--Parent component-->
<!--controller类名：ParentAuraController-->
<!--force:appHostable: 该组件可作为Lightning Experience的导航元素-->
<!--flexipage:availabeForAllPageTypes: 可在Lightning App Builder中使用，也做作为Page使用-->
<!--access=global: 该组件在所有的Orgs中都可以被引用-->
<aura:component controller="ParentAuraController"
implements="force:appHostable,flexipage:availableForAllPageTypes"
access="global">

<aura:attribute name="displayMonths" type="String[]" />
<aura:attribute name="selectedDisplayMonth" type="String" />
<aura:attribute name="displayMonth" type="String" default="Last 6 Months"/>
<aura:attribute name="read" type="Boolean" default="false" />

<!--组件初始化操作-->
<aura:handler name="init" value="{!this}" action="{!c.handleInit}" />

<div class="white">
<lightning:layout multipleRows="true">
<lightning:layoutItem size="4" padding="around-small">
<!--下拉框选择组件，selectedDisplayMonth为下拉框选择的值，displayMonths为下拉框值列表-->
<!--onchange: selectedDisplayMonth值改变时，调用controller.js中changeDisplayMonth函数-->
<lightning:select name="displayMonthId" label="Select display months" aura:id="displayMonthId"
value="{!v.selectedDisplayMonth}" required="true" onchange="{!c.changeDisplayMonth}">
<aura:iteration items="{!v.displayMonths}" var="displayMonth">
<option text="{!displayMonth}"></option>
</aura:iteration>
</lightning:select>
</lightning:layoutItem>

<lightning:layoutItem size="6" padding="around-small">
<div class="slds-p-top--large">
<!--按钮组件，label为界面显示值；onclick: 点击按钮时触发controller.js中applyHandle函数-->
<!--display: true表示按钮灰掉，无法操作；false表示正常工作-->
<lightning:button label="parentApply" onclick="{!c.applyHandle}" disabled="false" />
</div>
</lightning:layoutItem>
</lightning:layout>
<lightning:layout multipleRows="true">
<lightning:layoutItem size="12" padding="around-small">
<li>
<!--三元表达式-->
<aura:if isTrue="{!v.read}">
you can read it.
<aura:set attribute="else">
you cannot read it.
</aura:set>
</aura:if>
</li>
<li>displayMonth in parent: {!v.displayMonth}</li>
</lightning:layoutItem>
</lightning:layout>
<lightning:layout multipleRows="true">
<lightning:layoutItem size="12" padding="around-small">
<!--实例化childAura组件-->
<c:childAura childDisplayMonth="{!v.displayMonth}" />
</lightning:layoutItem>
</lightning:layout>
</div>
</aura:component>

parentAura.css

.THIS {
background-color: grey;
}

.THIS.white {
background-color: white;
}

parentAuraController.js

({
handleInit: function (cmp, event, helper) {
// 初始化组件时，调用Help.js中getDisplayMonths函数，获取下拉框值列表
helper.getDisplayMonths(cmp);
},

changeDisplayMonth: function (cmp, event, helper) {
console.log("displayMonths: " + cmp.get('v.displayMonths'))
console.log("selected displayMonth: " + cmp.get('v.selectedDisplayMonth'));

},

applyHandle: function (cmp, event, helper) {
// 点击parentApply按钮时，将下拉框选中的值赋值给属性displayMonth
cmp.set('v.displayMonth', cmp.get('v.selectedDisplayMonth'));
// 点击parentApply按钮时，将true赋值给属性read.
cmp.set('v.read', "true");
console.log("after click apply, displayMonth: " + cmp.get('v.displayMonth'));
}
})

parentAuraHelper.js

({
getDisplayMonths : function(cmp) {
// 获取controll.cls类中getDisplayMonths函数
var action = cmp.get("c.getDisplayMonths");
// 为该函数设置回调函数
action.setCallback(this, function (response) {
var status = response.getState();
console.log("get displayMonths: " + status);
// 判断调用controller.cls类getDisplayMonths函数的响应状态码
if (status == "SUCCESS") {
// 解析controller.cls传回的响应，并赋值给变量repsonseBody
var responseBody = JSON.parse(response.getReturnValue());
// 将变量responseBody赋值给组件属性displayMonths(下拉框值列表)
cmp.set("v.displayMonths", responseBody);
}
});
// 执行获取数据行动
$A.enqueueAction(action);
}
})

ParentAuraController.cls

public with sharing class ParentAuraController {
@AuraEnabled
public static String getDisplayMonths() {
List<String> displayMonths = new List<String>();
displayMonths.add('Last 6 Months');
displayMonths.add('Last 12 Months');
displayMonths.add('Last 18 Months');
displayMonths.add('Last 36 Months');
// 将响应序列化为Json格式
return JSON.serialize(displayMonths);
}
}

5.2 Child组件

childAura.cmp

<!--Child component-->
<aura:component>
<aura:attribute name="childDisplayMonth" type="String" default="child"/>
<div class="slds-p-top--large">
<lightning:layout multipleRows="false">
<lightning:layoutItem size="4" padding="around-small">
displayMonth in child: {!v.childDisplayMonth}
</lightning:layoutItem>
<lightning:layoutItem size="4" padding="around-small">
<lightning:button label="childApply" onclick="{!c.applyHandle}" disabled="false" />
</lightning:layoutItem>
</lightning:layout>
</div>
</aura:component>

childAura.css

.THIS {
background-color: LightSkyBlue;
}

childController.js

({
applyHandle : function(component, event, helper) {
component.set('v.childDisplayMonth', 'Last 36 Months');
}
})

5.3 案例分析

加载后如下图所示：

分析：

• 初始化parentAura组件时，从controller.cls中获取displayMonths值列表["Last 6 Months", "Last 12 Months", "Last 18 Months", "Last 36 Months"]，默认加载第一个值，所以下拉框中为Last 6 Months.
• read属性的默认值设为false，所以三元表达式中选择else项，打印：you cannot read it.
• displayMonth的默认值设置为Last 6 Months, 打印：displayMonth in parent: Last 6 Months.
• 在parentAura组件中初始化childAura组件时，传递childDisplayMonth值等于displayMonth，所以该属性值为Last 6 Months，而不使用默认值child，打印displayMonth in child: Last 6 Months.　　

更换下拉框值，并点击parentApply按钮：

分析：

• 下拉框选择Last 12 Months，点击parentApply按钮时，调用parentAuraController.js中applyHandle函数。该函数中，将selectedDisplayMonth赋值给displayMonth，打印：displayMonth in parent: Last 12 Months；将read属性重新赋值为true，所以三元表达式中选择if项，打印：you can read it.
• 在parentAura组件中实例化childAura组件时，赋值childDisplayMonth采用的是绑定的方式{!**}，所以修改parentAura组件中displayMonth属性值时，同步修改childAura组件中childDisplayMonth值。（自己可以尝试非绑定方式，查看结果如何）

点击childParent按钮：

分析：

• 点击childApply按钮，触发childAura组件childAuraController.js的applyHandle函数，该函数重新赋值属性childDisplayMonth等于Last 36 Months，打印：displayMonth in child: Last Months
• 在parentAura组件中实例化childAura组件时，赋值childDisplayMonth采用的是绑定的方式{!**}，所以修改childAura组件中childDisplayMonth属性值时，同步修改parentAura组件中displayMonth值。（自己可以尝试非绑定方式，查看结果如何）

作者：吴家二少

博客地址：https://www.cnblogs.com/cloudman-open/

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