Salesforce學習之路-developer篇（五）Aura組件原理及經常使用屬性

時間 2019-11-13

標籤 salesforce 學習之路 developer aura 組件原理經常使用屬性简体版

原文原文鏈接

很喜歡曾經看到的一句話：以輸出倒逼輸入。以輸出的形式強制本身學習，確實是高效的學習方式，真的很棒。如下僅爲我的學習理解，若有錯誤，歡迎指出，共同窗習。javascript

1. 什麼是Lightning Component框架？

Lightning Component框架是一個UI框架，用於爲移動和臺式設備開發Web應用程序。這是一個單頁面Web應用框架，用於爲Lightning Platform應用程序構建具備動態，響應式用戶界面的單頁應用程序。它在客戶端使用JavaScript，在服務器端使用Apex。css

Lightning Component做爲Web應用框架，能夠輕鬆的建立自定義應用程序，而沒必要本身編寫所有代碼。經常使用的Web應用程序框架有不少，例如：Ruby on Rails, Grails, AngularJS, Django, CakePHP等等，甚至前面提到的Visualforc component也是一種web框架。java

固然，Lighnting Component也能夠當作是CS架構。web

客戶端主要由兩個元素組成：View和Controller數據庫

View：是XML markup，同時混合了自定義的Aura component靜態HTML標籤，例如：<aura:component>標籤。若是有過Visualforce經驗的小夥伴必定對該格式比較熟悉：namespace:tagName。對於Aura的組件，Salesforce提供了很是完善的參考，各類不一樣的組件都已經給出參考示例，大大減小了開發和學習成本。具體的地址：https://developer.salesforce.com/docs/component-library/overview/components
Controller：主要是由JavaScript語言編寫，其目的主要是和服務端進行綁定，獲取所需的數據，並提供給View進行展現。

服務端主要也有兩個元素組成：Controller和Database。express

Controller: 由Apex語言開發（相似於Java語言），Apex與Java同樣，由一個個類文件組成，不一樣的是Java爲.java文件，而Apex爲.cls文件。注意，在客戶端的View文件中綁定的是類名稱。
Database: 使用數據操做語言DML(Data Manipulation Language)對數據進行插入，更新，刪除和建立操做。

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類，因此組件內全部資源均可鏈接該控制類。app

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」。

若是Org沒有建立命名空間前綴，下述狀況必須使用「c」命名空間前綴：
- 引用自定義建立的組件
- 引用自定義建立的事件
若是Org沒有建立命名空間，下述狀況下Org會自動使用隱式命名空間，即該場景下無需使用指定的命名空間前綴：
- 引用自定義對象
- 引用標準對象和自定義對象的字段
- 引用Apex的控制類
若是Org建立了命名空間前綴，下述狀況下必須使用自定義的命名空間前綴：
- 引用自定義建立的組件
- 引用自定義建立的事件
- 引用自定義對象
- 引用標準對象和自定義對象的字段
- 引用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沒有設置命名空間前綴

引用項	示例
標記中使用組件	<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}" />

Org設置了命名空間前綴

引用項	示例
標記中使用組件	<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="**">

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類型，指定框架類型。

基礎類型

類型	示例	描述
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 Class類型

該類型屬性對應一個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

<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錯誤，因此即便繼承自該組件的子組件也不可訪問。
public:
- 在當前org中均可以訪問。access的默認值即是public。
global:
- 在全部的org中均可以訪問。

應用訪問控制

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

加載後以下圖所示：

分析：

初始化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/

本文歡迎轉載，但未經做者贊成必須保留此段聲明，且在文章頁面明顯位置給出原文鏈接