微信小程序组件事件传递

小程序组件 wxml 里的绑定点击事件

1. <view bindtap='popViewDismissTap' class="weui-btn weui-btn_mini weui-btn_default">取消</view>
2. <viewbindtap='popViewSureTap'class="weui-btn weui-btn_mini weui-btn_default">确定</view>

组件JS文件里实现点击方法，并触发「popViewDismissEvent」事件，相应的监听者就会收到触发信号

1. methods: {
2. 'popViewDismissTap':function(e){
3. console.log('dismiss')
4. // this.setData({
5. // show:false
6. // })
7. // var myEventDetail = {} // detail对象，提供给事件监听函数
8. // var myEventOption = {} // 触发事件的选项
9. // this.triggerEvent('myevent', myEventDetail, myEventOption)
10. var myEventDetail = {"test":"123"} // detail对象，提供给事件监听函数
11. var myEventOption = {} // 触发事件的选项
12. this.triggerEvent('popViewDismissEvent', myEventDetail, myEventOption)
13. },
14. 'popViewSureTap':function(e){
15. console.log('show');
16. var myEventDetail = e.detial // detail对象，提供给事件监听函数
17. var myEventOption = {} // 触发事件的选项
18. this.triggerEvent('popViewSureEvent', myEventDetail, myEventOption)
19. }
20. }

在使用组件的地方使用bindXXX属性监听相应的触发事件

2. <component-popView item='{{popViewData}}' bindpopViewSureEvent="onPopViewSureEvent" bindpopViewDismissEvent='onPopViewDismissEvent'>
3. <viewslot='content'>
4. <inputclass="weui-input"bindinput='bindKeyInput'style='border:2rpx solid #f4f4f4;border-radius: 4rpx;'></input>
5. </view>
6. </component-popView>

然后在相应的JS文件里实现onPopViewDismissEvent方法即可