# 组件事件 事件系统是组件间交互的主要形式。自定义组件可以触发任意的事件，引用组件的页面可以监听这些事件。关于事件的基本概念和用法，参见 [事件](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` 接收。