上節帶您了解了如何將Lightning Web組件部署到組織，本節將為您介紹：在Salesforce開發過程中，如何處理Lightning Web組件中的事件。學習完本節內容后，您可以創建包含多個組件的應用程序、描述復雜組件的文件結構、處理事件。

 

上節(jie)(jie)您已(yi)經構(gou)建了一個(ge)組(zu)件并(bing)將其部署到(dao)組(zu)織，本(ben)節(jie)(jie)我們開始為事件處理(li)添(tian)加一些交互性。我們通過(guo)幾個(ge)組(zu)件跟蹤事件的(de)過(guo)程，以(yi)便在應用(yong)程序(xu)中處理(li)復雜事件。此應用(yong)程序(xu)是bicycle shop的(de)product selector。用(yong)戶點擊自行(xing)車名稱和圖像(xiang)，就可以(yi)查看更多詳細(xi)信息。

此應用程序有四個組件協同工作。

1、tile：顯示(shi)單(dan)個項目。

2、list：排列(lie)tiles。

3、detail：點擊某個(ge)tile時，會顯示該tile的詳細(xi)信(xin)息。

4、selector：包含整(zheng)套組件。容器(qi)組件不(bu)是(shi)必需的，但我們在此處使(shi)用一個容器(qi)組件，以幫助處理事件。

目(mu)前，該應用(yong)程序(xu)使用(yong)數(shu)據文件加載靜態數(shu)據進(jin)行測試。在(zai)下一單元中，您將(jiang)學習(xi)如(ru)何從org中提取動態數(shu)據。

 

 

組件構成

現在讓我們給項目添加一(yi)些可以部署(shu)到組織的文件。

1、在(zai)此(ci)處下載此(ci)應(ying)用(yong)程序的(de)文件(jian)：Trailhead的(de)Bike Selector應(ying)用(yong)程序。

2、將(jiang)文件(jian)解(jie)壓到bikeCard項目的lwc文件(jian)夾中

 

 

組(zu)件關系

在(zai)(zai)此應用程序(xu)中(zhong)(zhong)，多個組(zu)件協同工作(zuo)，某些組(zu)件嵌(qian)套(tao)在(zai)(zai)其(qi)他(ta)組(zu)件中(zhong)(zhong)。就像(xiang)HTML元(yuan)素(su)嵌(qian)套(tao)一樣(yang)，Lightning Web組(zu)件（即自定義(yi)HTML元(yuan)素(su)）也可(ke)以嵌(qian)套(tao)在(zai)(zai)其(qi)他(ta)Lightning Web 組(zu)件中(zhong)(zhong)。在(zai)(zai)我(wo)們(men)的(de)文(wen)件系(xi)統中(zhong)(zhong)，組(zu)件的(de)文(wen)件夾并不能讓我(wo)們(men)真正了解它們(men)間的(de)關系(xi)。讓我(wo)們(men)來(lai)看看這些組(zu)件是如(ru)何(he)在(zai)(zai)UI層(ceng)面(mian)上以圖表的(de)形(xing)式嵌(qian)套(tao)的(de)。

通過(guo)查看文件，您可以看到(dao)selector組件布置了(le)頁面，并(bing)顯示了(le)list(c-list)和detail(c-detail)組件。

用以(yi)下內容更新(xin)detail.html：

在detail.html中(zhong)，您可以看到lwc:if={product}和(he)lwc:else。如果未從(cong)列(lie)表中(zhong)選(xuan)擇任(ren)何內容，則顯(xian)示(shi)一條要求用戶選(xuan)擇的消息(xi)。如果選(xuan)擇了某些內容，就會顯(xian)示(shi)Bike的詳細(xi)信(xin)息(xi)。

 

list組(zu)件(jian)顯(xian)示了多個(ge)tile(c-tile)組(zu)件(jian)，數(shu)據中(zhong)的(de)(de)(de)每(mei)(mei)個(ge)Bike都對應(ying)一個(ge)組(zu)件(jian)。這種(zhong)嵌套是(shi)在每(mei)(mei)個(ge)父組(zu)件(jian)的(de)(de)(de)HTML中(zhong)實現的(de)(de)(de)。例如(ru)，列表(biao)組(zu)件(jian)有以下(xia)HTML，包括c-tile的(de)(de)(de)tile組(zu)件(jian)。

Bike項(xiang)目的(de)(de)每次迭代都會生成(cheng)一(yi)個(ge)新的(de)(de)tile組(zu)件(jian)。只要包(bao)含c-tile組(zu)件(jian)標簽，每個(ge)tile組(zu)件(jian)就(jiu)會成(cheng)為它的(de)(de)子組(zu)件(jian)。div類定義container用于設置樣式，因此您可以(yi)控制tile的(de)(de)排列。如果(guo)您查(cha)看list.css，就(jiu)就(jiu)看到它包(bao)裝了內(nei)容。

父/子關(guan)系不僅對于應用程序的設計很重(zhong)要，而且對于事件處理也很重(zhong)要。接下來讓(rang)我們更(geng)深入地研(yan)究一下事件處理。

 

 

事件向上，屬(shu)性向下

在復雜(za)組件（包含多個(ge)父組件和子組件）中，組件可以(yi)進行上下(xia)交流(liu)。

1、子組件(jian)(jian)c-todo-item向(xiang)父組件(jian)(jian)c-todo-app派發一個事件(jian)(jian)。例如，當用(yong)戶點擊按鈕時，子進程可(ke)以將事件(jian)(jian)對(dui)象傳遞給父進程，這樣(yang)父進程就可(ke)以處(chu)理該事件(jian)(jian)并更改當前(qian)頁面。

2、父組(zu)件(jian)(jian)(jian)c-todo-app傳遞(di)或調(diao)用子組(zu)件(jian)(jian)(jian)的(de)(de)屬(shu)性與方法。例如(ru)，父組(zu)件(jian)(jian)(jian)可以在子組(zu)件(jian)(jian)(jian)中設置文本值，或調(diao)用子組(zu)件(jian)(jian)(jian)的(de)(de)某(mou)個方法。

下面讓(rang)我們來看(kan)看(kan)這種(zhong)交流是如何(he)進行的。

 

 

向上傳(chuan)遞信息(xi)

可(ke)以使用 events和event listeners傳遞信(xin)息。子(zi)組(zu)件(jian)(jian)分派(pai)事(shi)件(jian)(jian)，父(fu)組(zu)件(jian)(jian)監聽(ting)事(shi)件(jian)(jian)。分派(pai)事(shi)件(jian)(jian)包括創建子(zi)組(zu)件(jian)(jian)可(ke)以傳遞給(gei)父(fu)組(zu)件(jian)(jian)的(de)事(shi)件(jian)(jian)對象。父(fu)組(zu)件(jian)(jian)有一(yi)個(ge)處理程序(xu)來(lai)響應該事(shi)件(jian)(jian)。例如，像這樣的(de)子(zi)組(zu)件(jian)(jian)包含一(yi)個(ge)nextHandler()方(fang)法(fa)，該方(fang)法(fa)使用CustomEvent()創建一(yi)個(ge)簡單的(de)事(shi)件(jian)(jian)對象，并在用戶(hu)點擊next按鈕時派(pai)發(fa)事(shi)件(jian)(jian)類型next。

事件類型可以是任何字(zi)(zi)符串，但應符合DOM事件標準(zhun)，即沒有大寫字(zi)(zi)母，沒有空格，必要(yao)時使用(yong)下劃線分隔(ge)單詞。

 

父組(zu)件(jian)用內(nei)聯事(shi)件(jian)處(chu)理程序監聽帶有on(onnext)前綴(zhui)的事(shi)件(jian)。

并將事(shi)件對象傳遞給事(shi)件處理程(cheng)序(xu)。

 

 

向下傳(chuan)遞(di)信息

可以使用公(gong)共(gong)(gong)屬(shu)性和公(gong)共(gong)(gong)方法傳遞信息。您(nin)可以使用@api decorator將組件屬(shu)性變成公(gong)共(gong)(gong)屬(shu)性。然后通(tong)過外部(bu)組件來設置公(gong)共(gong)(gong)屬(shu)性。

例如c-todo-item 子(zi)組件具有以(yi)下內容：

使用以下(xia)方(fang)法設置父節(jie)點的值：

itemName變量(liang)是使用kebab case屬(shu)性(xing)item-name來設置的(de)。JavaScript中(zhong)的(de)屬(shu)性(xing)名稱采用駝峰(feng)規則，而HTML屬(shu)性(xing)名是串式的(de)（用破(po)折號分隔），以符合HTML標(biao)準。標(biao)記(ji)中(zhong)的(de)item-name屬(shu)性(xing)映射到JavaScript的(de)itemName屬(shu)性(xing)。

 

公共屬性是傳遞原始值、簡(jian)單(dan)對(dui)象和數(shu)組的(de)絕佳解(jie)決(jue)方案。此(ci)外，當獲取或設置屬性時，您可(ke)以使用(yong)(yong)getter和setter來(lai)執行一些邏輯。要記住(zhu)，用(yong)(yong)@api decorator對(dui)它(ta)(ta)們進行注釋，使它(ta)(ta)們對(dui)其他組件公開。同(tong)樣地，您可(ke)以創建(jian)從(cong)父組件調用(yong)(yong)的(de)公共方法(fa)。通過使用(yong)(yong)@api decorator在子組件中(zhong)創建(jian)一個公共方法(fa)，然后從(cong)父組件中(zhong)調用(yong)(yong)它(ta)(ta)。

 

假(jia)設(she)我們有(you)一個這樣(yang)的(de)子組件(jian)。

當c-video-player組件(jian)被(bei)包含在(zai)父組件(jian)中時(shi)，我(wo)們就可以像(xiang)這樣從父組件(jian)中調用該(gai)方法:

我們定義(yi)了一個方法handlePlay()來觸發該事(shi)件。然后使用querySelector() DOM方法搜索名為(wei)c-video-player的DOM元素(su)，并調用其公共方法。

 

 

在HTML中處理(li)事件

因此(ci)，我(wo)們(men)的(de)選擇器(qi)應用(yong)程序需要處(chu)理(li)(li)一種類型的(de)事(shi)件--用(yong)戶(hu)點擊一個磁貼。當這種情況發生(sheng)時，detail組件應該用(yong)相關tile的(de)信息重(zhong)新呈(cheng)現(xian)。您(nin)可以用(yong)HTML（在模板(ban)中添加event listener）或JavaScript（編寫event listener function）處(chu)理(li)(li)事(shi)件。我(wo)們(men)推薦使用(yong)HTML方法，如下(xia)所(suo)示。

 

每個tile組(zu)件都監(jian)聽用戶的(de)點擊情況，因為tile組(zu)件的(de)HTML(tile. HTML)包(bao)含一個onclick事件監(jian)聽器。

當用(yong)(yong)戶點擊用(yong)(yong)戶界面中(zhong)的(de)一個tile實例時，onclick監聽器會調用(yong)(yong)tile.js JavaScript文件(jian)中(zhong)的(de)tileClick處理函數。

 

 

Selector App的事件模式

在product selector app中，我(wo)們使用了(le)一個復雜的(de)組(zu)(zu)(zu)(zu)件（包(bao)含多(duo)個父組(zu)(zu)(zu)(zu)件和子(zi)(zi)組(zu)(zu)(zu)(zu)件）。我(wo)們建議您(nin)通過組(zu)(zu)(zu)(zu)件的(de)層(ceng)次結構向上傳播事(shi)件，以便父組(zu)(zu)(zu)(zu)件可(ke)以響應子(zi)(zi)事(shi)件。如果您(nin)有其他(ta)子(zi)(zi)組(zu)(zu)(zu)(zu)件，但不(bu)是觸發事(shi)件的(de)子(zi)(zi)組(zu)(zu)(zu)(zu)件，則可(ke)以將屬(shu)性向下傳遞給這些子(zi)(zi)組(zu)(zu)(zu)(zu)件以響應事(shi)件。

模式如下所示(shi)：

為(wei)此，我們需要將event listeners和handlers在層次(ci)結構中向上鏈接到ebikes組件(jian)。然后(hou)向下(xia)傳(chuan)遞傳(chuan)遞一(yi)個屬性給detail組件(jian)。在我們的文件(jian)中，您可以看到以下(xia)內容(rong)。

1、tile.html有調用tileClick處理程(cheng)序的onclick事件監聽(ting)器。

2、tile.js可以創(chuang)建事件類(lei)型為tileClick的新CustomEvent和包(bao)含詳細(xi)值(this.product.fields.Id.value)的對(dui)象。

3、list.html有(you)調(diao)用(yong)handleTileClick處理程(cheng)序的ontileclick監聽器。

4、list.js有一(yi)個handleTileClick方法(fa)，它傳入事(shi)件(evt)來創(chuang)建另一(yi)個CustomEvent(productselected)，該對象也包含一(yi)個細(xi)節值evt.detail，并在JavaScript中(zhong)派發該事(shi)件:

5、selector.html有一個(ge)onproductselected事件監聽器，它調用(yong)handleProductSelected處理程序。

6、selector.js的(de)handleProductSelected方(fang)法將selectedProductId設置為傳(chuan)入的(de)event .detail值。

7、detail.html有一(yi)個條件指令(ling)，等待一(yi)個product值：

8、detail.js將這些部分結合起來(lai)，創(chuang)建一個私(si)有變量(liang)_productId來(lai)跟蹤productId值的狀態。然后(hou)使用get/set模(mo)式來(lai)獲(huo)取(qu)該值，并(bing)將其(qi)設置為(wei)變量(liang)，讓detail.html加載條件內容。

 

getter和setter是一種常見(jian)的JavaScript結(jie)構，它們允許您為(wei)屬性分配(pei)添加邏輯和條件(jian)。

每次(ci)點(dian)擊(ji)tile時，都會重復該過程(cheng)。

 

 

將(jiang)文件部署到組織

讓我們將(jiang)這(zhe)些新的bikeCard項目文件部(bu)署到您的組(zu)織中，看看它是如何工作的。部(bu)署步驟(zou)與上節相同，打開org，在Lightning App Builder中用這(zhe)個(ge)應用程序創建一個(ge)頁面。

1、在VS Code bikeCard項目中，右鍵(jian)點擊force-app/main/default文(wen)件夾，選擇SFDX: Deploy Source to Org。

2、在VS Code的(de)命令面板中，使用SSFDX: Open Default Or，打開(kai)您的(de)組織。

3、使用selector組(zu)件創建一個區域(yu)頁(ye)面(mian)。

4、給它一個標簽：Your Bike Selection

5、將(jiang)selector組件(jian)拖動到頁面布局的頂部。

6、保存并(bing)為所(suo)有用戶激活。

7、打開后可以看到組件已經出現(xian)在用戶界面中。

 

到此(ci)，您就有(you)了一(yi)個完全(quan)交(jiao)互式的頁面(mian)。下一(yi)節，我(wo)們(men)嘗試設置樣式，并(bing)從(cong)組織(zhi)獲取實時數據。