微信小程序:自定义组件触发父级页面事件
一、自定义组件定义如下:
1. js文件
Component({
var app = this
properties: {},
methods: {
onTap(){
var myEventDetail = {} // detail对象,提供给事件监听函数
var myEventOption = {} // 触发事件的选项
app.triggerEvent('myevent', myEventDetail, myEventOption)
}
}
})2. wxml文件
<view class="wrapper"> <view>这里是组件的内部节点</view> <slot></slot> <button bindtap="onTap">点击这个按钮将触发“myevent”事件</button> </view>
二、引用组件的父级页面
1. js文件
Page({
data: { },
myEventListener(e){
console.log(e)
}
})2. wxml文件
<view> <my-component bind:myevent="myEventListener"> </my-component> </view>
注:其中的 “myevent” 事件只是一个标识符,并不是一个方法的名称(自定义组件中没有,父级页面中也没有),其被指定为 bind:myevent="myEventListener"事件。即自定义组件中通“myevent”这一个标识符等于(=)或代表MyEventListener方法。自定义组件中通过使用“ this.triggerEvent('myevent', myEventDetail, myEventOption)” 来触发父级页面中的 “myEventListener” 方法


