微信小程序組件事件,小程序組件間交互的主要形式
2020-09-27
導(dǎo)讀:事件系統(tǒng)是組件間交互的主要形式。自定義組件可以觸發(fā)任意的事件,引用組件的頁面可以監(jiān)聽這些事件。關(guān)于事件的基本概念和用法。...
組件事件
事件系統(tǒng)是組件間交互的主要形式。自定義組件可以觸發(fā)任意的事件,引用組件的頁面可以監(jiān)聽這些事件。關(guān)于事件的基本概念和用法。
監(jiān)聽自定義組件事件的方法與監(jiān)聽基礎(chǔ)組件事件的方法完全一致:
代碼示例:
<!-- 當(dāng)自定義組件觸發(fā)“myevent”事件時,調(diào)用“onMyEvent”方法 -->
<component-tag-name bindmyevent="onMyEvent" />
<!-- 或者可以寫成 -->
<component-tag-name bind:myevent="onMyEvent" />
Page({
onMyEvent: function(e){
e.detail // 自定義組件觸發(fā)事件時提供的detail對象
}
})
自定義組件觸發(fā)事件時,需要使用 triggerEvent
方法,指定事件名、detail對象和事件選項:
代碼示例:
<!-- 在自定義組件中 -->
<button bindtap="onTap">點擊這個按鈕將觸發(fā)“myevent”事件</button>
Component({
properties: {}
methods: {
onTap: function(){
var myEventDetail = {} // detail對象,提供給事件監(jiān)聽函數(shù)
var myEventOption = {} // 觸發(fā)事件的選項
this.triggerEvent('myevent', myEventDetail, myEventOption)
}
}
})
觸發(fā)事件的選項包括:
選項名 | 類型 | 是否必填 | 默認(rèn)值 | 描述 |
---|---|---|---|---|
bubbles | Boolean | 否 | false | 事件是否冒泡 |
composed | Boolean | 否 | false | 事件是否可以穿越組件邊界,為false時,事件將只能在引用組件的節(jié)點樹上觸發(fā),不進(jìn)入其他任何組件內(nèi)部 |
capturePhase | Boolean | 否 | false | 事件是否擁有捕獲階段 |
關(guān)于冒泡和捕獲階段的概念,請閱讀 事件 章節(jié)中的相關(guān)說明。
代碼示例:
// 頁面 page.wxml
<another-component bindcustomevent="pageEventListener1">
<my-component bindcustomevent="pageEventListener2"></my-component>
</another-component>
// 組件 another-component.wxml
<view bindcustomevent="anotherEventListener">
<slot />
</view>
// 組件 my-component.wxml
<view bindcustomevent="myEventListener">
<slot />
</view>
// 組件 my-component.js
Component({
methods: {
onTap: function(){
this.triggerEvent('customevent', {}) // 只會觸發(fā) pageEventListener2
this.triggerEvent('customevent', {}, { bubbles: true }) // 會依次觸發(fā) pageEventListener2 、 pageEventListener1
this.triggerEvent('customevent', {}, { bubbles: true, composed: true }) // 會依次觸發(fā) pageEventListener2 、 anotherEventListener 、 pageEventListener1
}
}
})
第二部分:如何開通一個小商店