新聞中心

這里有您想知道的互聯(lián)網(wǎng)營銷解決方案

創(chuàng)新互聯(lián)百度小程序教程：組件間通信與事件

組件間通信與事件
- 組件間通信
監(jiān)聽事件
通過 dispatch 方法與父組件通信
通過 triggerEvent 方法與父組件通信
通過 this.selectComponent 方法獲取子組件示例對象

組件間通信與事件

組件間通信

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

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

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

監(jiān)聽事件

解釋：

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

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

代碼示例

SWAN

通過 dispatch 方法與父組件通信

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

代碼示例

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

在 WEB IDE 中打開

 
 
 
  
  
  /* 父組件邏輯 */
  
  
  Component({
  
  
   messages: {
  
  
   'childmessage': function (e) {
  
  
   console.log('childmessage', e);
  
  
   }
  
  
   }
  
  
  });
  
  
  
  
  
  /* 子組件邏輯 */
  
  
  Component({
  
  
   created() {
  
  
   this.dispatch('childmessage', {
  
  
   name: 'swan'
  
  
   });
  
  
   }
  
  
  });

通過 triggerEvent 方法與父組件通信

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

SWAN

代碼示例

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

在 WEB IDE 中打開

SWAN
JS

 
 
 
  
  
  /* 組件child頁面 */

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

SWAN
JS

 
 
 
  
  
  /* 使用該組件的頁面 */

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

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

選項名	類型	是否必填	默認值	描述
bubbles	Boolean	否	false	事件是否冒泡
capturePhase	Bollean	否	false	事件是否擁有捕獲階段

關于自定義組件的冒泡和捕獲階段。

代碼示例

SWAN
JS

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

通過 this.selectComponent 方法獲取子組件示例對象

代碼示例

SWAN
JS

 
 
 
  
  
  
  
  
  這是組件child
  
  
  
  
  
  
  
  
  這是使用child

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

注意：

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

網(wǎng)頁名稱：創(chuàng)新互聯(lián)百度小程序教程：組件間通信與事件
標題鏈接：http://www.fisionsoft.com.cn/article/codejog.html

新聞中心

組件間通信與事件

組件間通信

監(jiān)聽事件

通過 dispatch 方法與父組件通信

通過 triggerEvent 方法與父組件通信

通過 this.selectComponent 方法獲取子組件示例對象

其他資訊