• 組件間通信與事件
  • 組件間通信
• 監(jiān)聽(tīng)事件
• 通過(guò) dispatch 方法與父組件通信
• 通過(guò) triggerEvent 方法與父組件通信
• 通過(guò) this.selectComponent 方法獲取子組件示例對(duì)象

組件間通信與事件

組件間通信

組件間的基本通信方式有以下幾種：

創(chuàng)新互聯(lián)是一家集做網(wǎng)站、成都網(wǎng)站建設(shè)、網(wǎng)站頁(yè)面設(shè)計(jì)、網(wǎng)站優(yōu)化SEO優(yōu)化為一體的專業(yè)網(wǎng)絡(luò)公司，已為成都等多地近百家企業(yè)提供網(wǎng)站建設(shè)服務(wù)。追求良好的瀏覽體驗(yàn),以探求精品塑造與理念升華,設(shè)計(jì)最適合用戶的網(wǎng)站頁(yè)面。 合作只是第一步，服務(wù)才是根本,我們始終堅(jiān)持講誠(chéng)信，負(fù)責(zé)任的原則，為您進(jìn)行細(xì)心、貼心、認(rèn)真的服務(wù),與眾多客戶在蓬勃發(fā)展的市場(chǎng)環(huán)境中,互促共生。

• 在父組件中可以通過(guò)設(shè)置子組件的 properties 來(lái)向子組件傳遞數(shù)據(jù)；
• 在父組件中定義 messages 對(duì)象，對(duì)子組件 dispatch 方法進(jìn)行攔截，從而達(dá)到子組件向上通信；
• 子組件可以通過(guò) triggerEvent 方法觸發(fā)父組件的自定義事件進(jìn)行傳參；
• 如果以上幾種方式不足以滿足需要，父組件還可以通過(guò) this.selectComponent 方法獲取子組件實(shí)例對(duì)象，這樣就可以直接訪問(wèn)組件的任意數(shù)據(jù)和方法。

監(jiān)聽(tīng)事件

解釋：

事件系統(tǒng)是組件間通信的主要方式之一。自定義組件可以觸發(fā)任意的事件，引用組件的頁(yè)面可以監(jiān)聽(tīng)這些事件。

監(jiān)聽(tīng)自定義組件事件的方法與監(jiān)聽(tīng)基礎(chǔ)組件事件的方法完全一致。

代碼示例

• SWAN

通過(guò) dispatch 方法與父組件通信

通過(guò) dispatch 方法，子組件可以向組件樹(shù)的上層派發(fā)消息。消息將沿著組件樹(shù)向上傳遞，直到遇到第一個(gè)處理該消息的組件，則停止。
通過(guò) messages 可以聲明組件要處理的消息，messages 是一個(gè)對(duì)象，key 是消息名稱，value 是消息處理的函數(shù)，接收一個(gè)包含 target（派發(fā)消息的組件）和 value（消息的值）的參數(shù)對(duì)象。

代碼示例

在開(kāi)發(fā)者工具中打開(kāi)

在開(kāi)發(fā)者工具中打開(kāi)

在 WEB IDE 中打開(kāi)

• JS

 
 
 

  
  
  
/* 父組件邏輯 */
  
  
  
Component({
  
  
  
 messages: {
  
  
  
 'childmessage': function (e) {
  
  
  
 console.log('childmessage', e);
  
  
  
 }
  
  
  
 }
  
  
  
});
  
  
  

  
  
  
/* 子組件邏輯 */
  
  
  
Component({
  
  
  
 created() {
  
  
  
 this.dispatch('childmessage', {
  
  
  
 name: 'swan'
  
  
  
 });
  
  
  
 }
  
  
  
});
 
 
 

通過(guò) triggerEvent 方法與父組件通信

解釋：自定義組件觸發(fā)事件時(shí)，需要使用 triggerEvent 方法，指定事件名和 detail 對(duì)象：

• SWAN

 
 
 

  
  
  
點(diǎn)擊這個(gè)按鈕將觸發(fā) myevent 事件
 
 
 

代碼示例

在開(kāi)發(fā)者工具中打開(kāi)

在開(kāi)發(fā)者工具中打開(kāi)

在 WEB IDE 中打開(kāi)

• SWAN
• JS

 
 
 

  
  
  
/* 組件child頁(yè)面 */
  
  
  
點(diǎn)擊這個(gè)按鈕將觸發(fā) myevent 事件
 
 
 

 
 
 

  
  
  
/* 組件child邏輯 */
  
  
  
Component({
  
  
  
 properties: {},
  
  
  
 methods: {
  
  
  
 onTap: function() {
  
  
  
 // detail對(duì)象，提供給事件監(jiān)聽(tīng)函數(shù)
  
  
  
 var myEventDetail = {} 
  
  
  
 // 觸發(fā)事件的選項(xiàng)
  
  
  
 var myEventOption = {bubbles:true} 
  
  
  
 this.triggerEvent('myevent', myEventDetail, myEventOption);
  
  
  
 }
  
  
  
 }
  
  
  
});
 
 
 

• SWAN
• JS

 
 
 

  
  
  
/* 使用該組件的頁(yè)面 */
  
  
  

 
 
 

 
 
 

  
  
  
/* 使用該組件的邏輯 */
  
  
  
Page({
  
  
  
 listener: function (e) {
  
  
  
 console.log(e);
  
  
  
 }
  
  
  
})
 
 
 

觸發(fā)事件的選項(xiàng)包括：

選項(xiàng)名	類型	是否必填	默認(rèn)值	描述
bubbles	Boolean	否	false	事件是否冒泡
capturePhase	Bollean	否	false	事件是否擁有捕獲階段

關(guān)于自定義組件的冒泡和捕獲階段。

代碼示例

• SWAN
• JS

 
 
 

  
  
  

  
  
  

  
  
  
 
  
  
  

  
  
  

  
  
  
 
  
  
  

  
  
  
 
  
  
  

  
  
  

  
  
  
 
  
  
  

  
  
  
 點(diǎn)我觸發(fā)
  
  
  

 
 
 

 
 
 

  
  
  
// 組件 child.js
  
  
  
Component({
  
  
  
 methods: {
  
  
  
 onTap: function() {
  
  
  
 // 只會(huì)觸發(fā) pageEventListener2
  
  
  
 this.triggerEvent('customevent', {}) 
  
  
  
 // this.triggerEvent('customevent', {}, { bubbles: true }) // 會(huì)依次觸發(fā) pageEventListener2 、 pageEventListener1
  
  
  
 // this.triggerEvent('customevent', {}, { bubbles: true, capturePhase: true }) // 會(huì)依次觸發(fā) pageEventListener2 、 anotherEventListener 、 pageEventListener1
  
  
  
 }
  
  
  
 }
  
  
  
})
 
 
 

通過(guò) this.selectComponent 方法獲取子組件示例對(duì)象

代碼示例

• SWAN
• JS

 
 
 

  
  
  

  
  
  
這是組件child
  
  
  

  
  
  

  
  
  
這是使用child
 
 
 

 
 
 

  
  
  
// 使用該組件的邏輯
  
  
  
Page({
  
  
  
 onLoad: function () {
  
  
  
 const res = this.selectComponent('#page-id');
  
  
  
 console.log(res);
  
  
  
 }
  
  
  
});
 
 
 

注意：

• 對(duì)于 triggerEvent 方法，在基礎(chǔ)庫(kù)版本 2.0.3 之前（不包含 2.0.3）只支持傳遞類型為 object 的數(shù)據(jù)，從 2.0.3 開(kāi)始支持傳遞其它數(shù)據(jù)類型（不包括 function 和 undefined），其它低版本請(qǐng)做好兼容。
• 對(duì)于很多 UI 組件庫(kù)需要實(shí)現(xiàn)組件間關(guān)系，實(shí)際上組件間通信同樣可以滿足此需求。（之前組件間通信無(wú)法在存在 slot 環(huán)境使用，我們將于基礎(chǔ)版本庫(kù) 3.110.14 修復(fù)此問(wèn)題）詳細(xì)內(nèi)容
• 通過(guò) triggerEvent 方式觸發(fā)的自定義事件，只能在擁有父子關(guān)系的組件之間傳播。
• 只能觸發(fā)綁定在組件自身標(biāo)簽上的事件監(jiān)聽(tīng)方法。

當(dāng)前文章：創(chuàng)新互聯(lián)百度小程序教程：組件間通信與事件
轉(zhuǎn)載源于：http://www.dlmjj.cn/article/codejog.html