百度智能小程序 組件間通信與事件

組件間通信

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

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

監(jiān)聽事件

解釋：

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

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

代碼示例

<!-- 父組件模板 -->
<component-tag-name bindmyevent="onMyEvent" />

通過 dispatch 方法與父組件通信

通過 dispatch 方法，子組件可以向組件樹的上層派發(fā)消息。消息將沿著組件樹向上傳遞，直到遇到第一個(gè)處理該消息的組件，則停止。

通過 messages 可以聲明組件要處理的消息，messages 是一個(gè)對(duì)象，key 是消息名稱，value 是消息處理的函數(shù)，接收一個(gè)包含 target(派發(fā)消息的組件) 和 value(消息的值) 的參數(shù)對(duì)象。

代碼示例 

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

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

通過 triggerEvent 方法與父組件通信

解釋：

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

<button bindtap="onTap">點(diǎn)擊這個(gè)按鈕將觸發(fā) myevent 事件</button>

代碼示例 

/* 組件child頁面 */
<button bindtap="onTap">點(diǎn)擊這個(gè)按鈕將觸發(fā) myevent 事件</button>

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

/* 使用該組件的頁面 */
<child bindmyevent="listener"></child>

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

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

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

代碼示例

<!-- 頁面 index.swan -->
<parent bindcustomevent="pageEventListener1">
  <child bindcustomevent="pageEventListener2"></child>
</parent>

 <!-- 組件 parent.swan -->
<view bindcustomevent="anotherEventListener">
  <slot />
</view>

 <!-- 組件 child.swan -->
<view bindcustomevent="myEventListener">
  <button bindtap="onTap">點(diǎn)我觸發(fā)</button>
</view>

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

注意：

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