事件回调工具与事件监听

事件回调工具

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
    }