事件回调工具
1、 在工具类utils中自定义回调函数
/**
*获取回调参数自定义
* @param event
* @param String
* @returns {*}
*/
function getDataSet(event, String) {
return event.currentTarget.dataset[String]
}
2、使用自定义的回调函数
<button bind:tap="handleUpdateStatus" data-action="{
{1}}">
取消服务
</button>
handleUpdateStatus: function (event) {
//使用自定义的回调函数
const action = getDataSet(event, "action")
console.log(action) //打印1
},
事件监听
1、组件中
组件publisher-action.wxml中,定义函数事件
<button wx:if="{
{service.status!==serviceStatusEnum.CANCELED && service.status!==serviceStatusEnum.OFF_SHELVES}}"
bind:tap="handleUpdateStatus" data-action="{
{serviceActionEnum.CANCEL}}">
取消服务
</button>
组件publisher-action.js中实现函数调用函数,使用 triggerEvent 方法并将事件数据传递给父组件
methods: {
handleUpdateStatus: function (event) {
const action = getDataSet(event, "action")
console.log(action)
//实现
this.triggerEvent('update', {
action})
}
}
2、在父页面中接收事件传递的数据
页面service-detail.wxml
<i-publisher-action wx:if="{
{isPublisher}}" service="{
{service}}"
bind:update="handleUpdate"/>
页面service-detail.js
handleUpdate:function (evnet){
console.log("123") //打印123
}