其他分享
首页 > 其他分享> > Salesforce学习之路-developer篇(五)一文读懂Aura原理及实战案例分析

Salesforce学习之路-developer篇(五)一文读懂Aura原理及实战案例分析

作者:互联网

1. 什么是Lightning Component框架?

 Lightning Component框架是一个UI框架,用于为移动和台式设备开发Web应用程序。这是一个单页面Web应用框架,用于为Lightning Platform应用程序构建具有动态,响应式用户界面的单页应用程序。它在客户端使用JavaScript,在服务器端使用Apex。

Lightning Component作为Web应用框架,可以轻松的创建自定义应用程序,而不必自己编写全部代码。常用的Web应用程序框架有很多, 例如:Ruby on Rails, Grails, AngularJS, Django, CakePHP等等,甚至前面提到的Visualforc component也是一种web框架。

当然,Lighnting Component也可以看成是CS架构。

客户端主要由两个元素组成:View和Controller

服务端主要也有两个元素组成:Controller和Database。

2. Aura组件捆绑包

Aura组件便是基于Lighnting Component框架进行的二次开发。

2.1 组件的命名规则

创建组件时,其命名的规则必须满足如下条件:

2.2 组件创建的文件

当我们在工程中创建一个新的Aura捆绑包(以下捆绑包都称为组件)时,工程会自动创建出.auradoc,.cmp,.xml,.css,.design,svg,controller.js,help.js,renderer.js几个文件。

资源 资源名称 用途
component testAura.cmp 在捆绑包中唯一的必要资源,包含了组件的标记,并且每个捆绑包中只有一个component。
CSS样式 testAura.css 组件的形状格式
Design testAura.design 当组件在Lightning App Builder或者Lightning Page中使用时需要用到该文件
Helper testAuraHelper.js Javascript函数,该函数可以被捆绑包中的任何javascript代码调用
Documentation testAura.auradoc 对组件的一些简单介绍说明
Renderer testAuraRenderer.js 客户端渲染器会覆盖默认的渲染器
Controller testAuraController.js 客户端的控制函数,用来处理组件中的事件
SVG文件 testAura.svg 组件的自定义图标资源,一般为Lightning App Builder中使用的图标

 组件捆绑包中的所有资源都遵循命名规则,并且自动绑定连接。例如:<aura:component controller="TestAuraController">,组件会自动连接TestAuraController.cls类,所以组件内所有资源都可连接该控制类。

2.3 组件的工作原理

组件由自动创建的一系列文件组成,并且每个文件都发挥着不同的功能。其中,组件的主体便是component(.cmp文件),对于最精简的组件来讲,只修改.cmp文件即可(其他文件使用默认值),该文件为组件定义了视图。

当然,对于实际项目开发中,仅仅含有视图是远远不够的。通常,我们需要修改controller.js和helper.js文件。controller.js与.cmp文件交互,提供视图中所需要的数据;helper.js与服务器controller.cls交互,获取数据库中的数据;controller.js直接调用helper.js中的函数(当然,可以把helper.js中的函数直接写在controller.js中,直接从controller.js中获取数据库中的数据,但该模式不便与维护,不推荐使用)。

如果组件需要与服务器中数据库进行交互,则还需创建一个Apex控制类,与控制类与数据库交互,并将数据传递给组件。

不同文件之间的联系,如下图所示:

3. 组件的命名空间

3.1 命名空间的适用场景

每个组件都是命名空间的一部分,如果Org中设置了命名空间前缀,那么需使用该命名空间访问组件。否则,使用默认命名空间访问组件,系统默认的命名空间为“c”。

3.2 命名空间命名规则

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

例如: myNamespace123和my_namespace是有效的;123MyNamespce和my__namespace是无效的。

3.3 创建命名空间

Setup-->Packages(注意:该条目只在Salesforce Classic版本中才有)-->Developer Settings-->Edit

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

3.4 命名空间使用示例

引用项 示例
标记中使用组件 <c:myComponent>
系统属性中使用组件

<aura:component extends="c:myComponent">
<aura:component implements="c:myInterface">

Apex控制类 <aura:component controller="ExpenseController">
属性的类型为自定义对象 <aura:attribute name="expense" type="Expense__c" /> 
属性的类型为自定义对象,并且设置默认值 复制代码
<aura:attribute name="newExpense" type="Expense__c"
    default="{ 'sobjectType': 'Expense__c',
               'Name': '',
               'Amount__c': 0,
               …
    }" />
复制代码
表达式中含有自定义对象的字段 <ui:inputNumber value="{!v.newExpense.Amount__c}" label=… />
javascript函数中含有自定义对象字段 复制代码
updateTotal: function(component) {
    …
    for(var i = 0 ; i < expenses.length ; i++){
        var exp = expenses[i];
        total += exp.Amount__c;
    }
    …
}
复制代码
在Javascript函数中动态创建新的组件
var myCmp = $A.createComponent("c:myComponent", {},
    function(myCmp) { }
);
在Javascript函数中的接口对比 aCmp.isInstanceOf("c:myInterface")
注册事件 <aura:registerEvent type="c:updateExpenseItem" name=… />
事件处理 <aura:handler event="c:updateExpenseItem" action=… />
显式依赖 <aura:dependency resource="markup://c:myComponent" />
Javascript函数中的应用事件 var updateEvent = $A.get("e.c:updateExpenseItem");
静态资源 <ltng:require scripts="{!$Resource.resourceName}" styles="{!$Resource.resourceName}" />
引用项 示例
标记中使用组件 <yournamespace:myComponent />
系统属性中使用组件

<aura:component extends="yournamespace:myComponent">
<aura:component implements="yournamespace:myInterface">

Apex控制类 <aura:component controller="yournamespace.ExpenseController">
属性的类型为自定义对象 <aura:attribute name="expenses" type="yournamespace__Expense__c[]" />
属性的类型为自定义对象,并且设置默认值 复制代码
<aura:attribute name="newExpense" type="yournamespace__Expense__c"
    default="{ 'sobjectType': 'yournamespace__Expense__c',
               'Name': '',
               'yournamespace__Amount__c': 0,
               …
    }" />
复制代码
表达式中含有自定义对象的字段 <ui:inputNumber value="{!v.newExpense.yournamespace__Amount__c}" label=… />
javascript函数中含有自定义对象字段 复制代码
updateTotal: function(component) {
    …
    for(var i = 0 ; i < expenses.length ; i++){
        var exp = expenses[i];
        total += exp.yournamespace__Amount__c;
    }
    …
}
复制代码
在Javascript函数中动态创建新的组件
var myCmp = $A.createComponent("yournamespace:myComponent",
    {},
    function(myCmp) { }
);
在Javascript函数中的接口对比 aCmp.isInstanceOf("yournamespace:myInterface")
注册事件 <aura:registerEvent type="yournamespace:updateExpenseItem" name=… />
事件处理 <aura:handler event="yournamespace:updateExpenseItem" action=… />
显式依赖 <aura:dependency resource="markup://yournamespace:myComponent" />
Javascript函数中的应用事件 var updateEvent = $A.get("e.yournamespace:updateExpenseItem");
静态资源 <ltng:require scripts="{!$Resource.yournamespace__resourceName}" styles="{!$Resource.yournamespace__resourceName}" />

4 组件的主体

4.1 配置项

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

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

配置 标记 描述
Lightning Tab implements="force:appHostable" 创建一个组件,该组件可以作用Lightning Experience或者Salesfroce手机App的导航元素
Lightning Page implements="flexipage:avaliableForAllPageTypes" and access="global" 创建一个组件,该组件可以用在Lightning页面或者Lightning App Builder中
Lighnting Record Page implements="flexipage:availableForRecordHome, force:hasRecordId" and access="global" 创建一个组件,该组件可以用在Lightning Experience的记录的Home页面
Lighnting Communities Page

implements="forceCommunity:availableForAllPageTypes" and access="global"

创建一个组件,该组件支持在Community Builder中拖拽功能
Lighnting Quick Action implements="force:lightningQuickAction" 创建一个组件,该组件可以充当一个Lightnging quick action

示例:

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

4.2 组件属性

组件属性类似与Apex中类的成员变量(或者说Java中类的成员变量)。他们是组件在特定的实例上设置的类型化字段,可以使用表达式语法从组件的标记内引用他们。

语法:<aura:attribute name="**" type="**" default="**" required="true/false" access="**" description="**"> 

示例:

<aura:component>
    <aura:attribute name="whom" type="String" default="world"/>
    Hello {!v.whom}!
</aura:component>

1) 属性命名规则:

2) 属性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="acct" type="Account" />
<aura:attribute name="expense" type="Expense__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']" /> 集合,无序,不含重复元素。

示例:

复制代码
<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类。

示例:

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

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

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

类型 示例 描述
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.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

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

access的值

应用访问控制

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

修饰符 描述
public 仅在当前org中可用。access的默认值。
global 在所有的org中可用。

组件访问控制

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

修饰符 描述
public 仅在当前org中可用。access的默认值。
global 在所有的org中可用。

属性访问控制

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

修饰符 描述
private 可在应用,组件,接口,事件或者方法中使用, 不能被外部资源使用(命名空间)
public 仅在当前org中可用。access的默认值。
global 在所有的org中可用。

接口访问控制

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

修饰符 描述
public 仅在当前org中可用。access的默认值。
global 在所有的org中可用。

事件访问控制

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

修饰符 描述
public 仅在当前org中可用。access的默认值。
global 在所有的org中可用。

示例:

<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 案例分析

加载后如下图所示:

分析:

更换下拉框值,并点击parentApply按钮:

分析:

点击childParent按钮:

分析:

http://market.szonline.net/amaz/24352.html
http://market.szonline.net/amaz/24351.html
http://market.szonline.net/amaz/24350.html
http://market.szonline.net/amaz/24349.html
http://market.szonline.net/amaz/24348.html
http://market.szonline.net/amaz/24347.html
http://market.szonline.net/amaz/24346.html
http://market.szonline.net/amaz/24345.html
http://market.szonline.net/amaz/24344.html
http://market.szonline.net/amaz/24343.html
http://market.szonline.net/amaz/24342.html
http://market.szonline.net/amaz/24341.html
http://market.szonline.net/amaz/24340.html
http://market.szonline.net/amaz/24339.html
http://market.szonline.net/amaz/24338.html
http://market.szonline.net/amaz/24337.html
http://market.szonline.net/amaz/24336.html
http://market.szonline.net/amaz/24335.html
http://market.szonline.net/amaz/24334.html
http://market.szonline.net/amaz/24333.html
http://market.szonline.net/amaz/24332.html
http://market.szonline.net/amaz/24331.html
http://market.szonline.net/amaz/24330.html
http://market.szonline.net/amaz/24329.html
http://market.szonline.net/amaz/24328.html
http://market.szonline.net/amaz/24327.html
http://market.szonline.net/amaz/24326.html
http://market.szonline.net/amaz/24325.html
http://market.szonline.net/amaz/24324.html
http://market.szonline.net/amaz/24323.html
http://market.szonline.net/amaz/24322.html
http://www.72177.com/htm/201911/17/4506546.htm
http://www.72177.com/htm/201911/17/4506545.htm
http://www.72177.com/htm/201911/17/4506544.htm
http://www.72177.com/htm/201911/17/4506541.htm
http://www.72177.com/htm/201911/17/4506540.htm
http://www.72177.com/htm/201911/17/4506539.htm
http://www.72177.com/htm/201911/17/4506537.htm
http://www.72177.com/htm/201911/17/4506536.htm
http://www.72177.com/htm/201911/17/4506534.htm
http://www.72177.com/htm/201911/17/4506533.htm
http://www.72177.com/htm/201911/17/4506531.htm
http://www.72177.com/htm/201911/17/4506529.htm
http://www.72177.com/htm/201911/17/4506528.htm
http://www.72177.com/htm/201911/17/4506527.htm
http://www.72177.com/htm/201911/17/4506523.htm
http://www.72177.com/htm/201911/17/4506522.htm
http://www.72177.com/htm/201911/17/4506521.htm
http://www.72177.com/htm/201911/17/4506519.htm
http://www.72177.com/htm/201911/17/4506518.htm
http://www.72177.com/htm/201911/17/4506517.htm
http://www.72177.com/htm/201911/17/4506516.htm
http://www.72177.com/htm/201911/17/4506515.htm
http://www.72177.com/htm/201911/17/4506512.htm
http://www.72177.com/htm/201911/17/4506511.htm
http://www.72177.com/htm/201911/17/4506509.htm
http://www.72177.com/htm/201911/17/4506508.htm
http://www.72177.com/htm/201911/17/4506506.htm

http://market.szonline.net/amaz/24388.html
http://market.szonline.net/amaz/24387.html
http://market.szonline.net/amaz/24386.html
http://market.szonline.net/amaz/24385.html
http://market.szonline.net/amaz/24384.html
http://market.szonline.net/amaz/24383.html
http://market.szonline.net/amaz/24382.html
http://market.szonline.net/amaz/24381.html
http://market.szonline.net/amaz/24380.html
http://market.szonline.net/amaz/24379.html
http://market.szonline.net/amaz/24378.html
http://market.szonline.net/amaz/24377.html
http://market.szonline.net/amaz/24376.html
http://market.szonline.net/amaz/24375.html
http://market.szonline.net/amaz/24374.html
http://market.szonline.net/amaz/24373.html
http://market.szonline.net/amaz/24372.html

标签:htmlhttp,Salesforce,szonline,Aura,组件,net,amaz,market,developer
来源: https://www.cnblogs.com/cider/p/11881265.html