W3Cschool
恭喜您成為首批注冊用戶
獲得88經(jīng)驗值獎勵
組件間的基本通信方式有以下幾種。
事件系統(tǒng)是組件間通信的主要方式之一。自定義組件可以觸發(fā)任意的事件,引用組件的頁面可以監(jiān)聽這些事件。關于事件的基本概念和用法,參見 事件。 監(jiān)聽自定義組件事件的方法與監(jiān)聽基礎組件事件的方法完全一致: 代碼示例:
<!-- 當自定義組件觸發(fā)“myevent”事件時,調(diào)用“onMyEvent”方法 -->
<component-tag-name bindmyevent="onMyEvent" />
<!-- 或者可以寫成 -->
<component-tag-name bind:myevent="onMyEvent" />
Page({
onMyEvent(e) {
e.detail // 自定義組件觸發(fā)事件時提供的detail對象
}
})
自定義組件觸發(fā)事件時,需要使用 triggerEvent 方法,指定事件名、detail對象和事件選項:
<!-- 在自定義組件中 -->
<button bindtap="onTap">點擊這個按鈕將觸發(fā)“myevent”事件</button>
Component({
properties: {},
methods: {
onTap() {
const myEventDetail = {} // detail對象,提供給事件監(jiān)聽函數(shù)
const myEventOption = {} // 觸發(fā)事件的選項
this.triggerEvent('myevent', myEventDetail, myEventOption)
}
}
})
觸發(fā)事件的選項包括:
選項名 | 類型 | 是否必填 | 默認值 | 描述 |
---|---|---|---|---|
bubbles | Boolean | 否 | false | 事件是否冒泡 |
composed | Boolean | 否 | false | 事件是否可以穿越組件邊界,為false時,事件將只能在引用組件的節(jié)點樹上觸發(fā),不進入其他任何組件內(nèi)部 |
capturePhase | Boolean | 否 | false | 事件是否擁有捕獲階段 |
關于冒泡和捕獲階段的概念,請閱讀 事件 章節(jié)中的相關說明。
// 頁面 page.qml
<another-component bindcustomevent="pageEventListener1">
<my-component bindcustomevent="pageEventListener2"></my-component>
</another-component>
// 組件 another-component.qml
<view bindcustomevent="anotherEventListener">
<slot />
</view>
// 組件 my-component.qml
<view bindcustomevent="myEventListener">
<slot />
</view>
// 組件 my-component.js
Component({
methods: {
onTap() {
this.triggerEvent('customevent', {}) // 只會觸發(fā) pageEventListener2
this.triggerEvent('customevent', {}, {bubbles: true}) // 會依次觸發(fā) pageEventListener2 、 pageEventListener1
this.triggerEvent('customevent', {}, {bubbles: true, composed: true}) // 會依次觸發(fā) pageEventListener2 、 anotherEventListener 、 pageEventListener1
}
}
})
Copyright©2021 w3cschool編程獅|閩ICP備15016281號-3|閩公網(wǎng)安備35020302033924號
違法和不良信息舉報電話:173-0602-2364|舉報郵箱:jubao@eeedong.com
掃描二維碼
下載編程獅App
編程獅公眾號
聯(lián)系方式:
更多建議: