# 組件事件 事件系統是組件間交互的主要形式。自定義組件可以觸發任意的事件，引用組件的頁面可以監聽這些事件。關于事件的基本概念和用法，參見 [事件](https://mp.weixin.qq.com/debug/wxadoc/dev/framework/view/wxml/event.html) 。 監聽自定義組件事件的方法與監聽基礎組件事件的方法完全一致： **代碼示例：** **組件** *components/com/index.wxml* ```html <view class="wrapper"> <button bind:tap="comTap">組件事件測試</button> </view> ``` *components/com/index.js* 在 Components 中加入 `methods` ，將監聽函數放到里面，就可以監聽對應事件。 使用 `triggerEvent` 向父頁面傳遞事件，第一個參數為事件名，第二個參數為要傳遞的數據，第三個參數為事件選項。 ```js Component({ methods: { comTap () { console.log('component tap') let postData = { a: 2, b: 5 } this.triggerEvent('comTap', postData, { bubbles: false, composed: false, capturePhase: false }) } } }) ``` 觸發事件的選項包括： | 選項名 | 類型 | 是否必填 | 默認值 | 描述 | | ------------ | ------- | ---- | ----- | ---------------------------------------- | | bubbles | Boolean | 否 | false | 事件是否冒泡 | | composed | Boolean | 否 | false | 事件是否可以穿越組件邊界，為false時，事件將只能在引用組件的節點樹上觸發，不進入其他任何組件內部 | | capturePhase | Boolean | 否 | false | 事件是否擁有捕獲階段 | 關于冒泡和捕獲階段的概念，可以閱讀 [事件](https://mp.weixin.qq.com/debug/wxadoc/dev/framework/view/wxml/event.html) 。 **引用組件的頁面** *pages/test/index.wxml* 直接將需要傳遞的值寫到屬性中，注意使用 {{}} 進行數據綁定。 ```html <view> <componentTest bind:comTap="componentTap" > </componentTest> </view> ``` *pages/test/index.js* ```js Page({ componentTap (e) { console.log('page tap') console.log(e) console.log(e.detail) } }) ``` 可以看到控制臺打印出 : :-:  可以看到，由子組件傳遞的數據可以使用 `event.detail` 接收。