小程序 methods方法互相调用 this.onClickCancel is not a function

背景

做了一个自定义的弹出对话窗口，主要是自定义一些文本颜色。

问题

但是点击按钮事件：取消与确认，调用了同一个接口，然后想着走不同方法，需要调用methods其他方法。然后报错了：

VM1081 WAService.js:2 TypeError: _this.onClickCancel is not a function

效果：

想着是不是methods方法不能互相调用。最后发现是自己把方法放在methods:{}外面了。

如下

Component({properties: {showModal: true},data: {},lifetimes: {attached() {console.log(">>showModal", this.data.showModal)}},onClickCancel(e) {console.log('>>点击了取消')this.triggerEvent('onclickcancel')},onClickComfirm(e) {console.log("点击了确认")this.triggerEvent('onclickcomfirm')},methods: {onClickMask(e) {console.log(">>>点击 onClickMask", e)console.log(this)console.log(">>> methods", this.methods)if (e.target.dataset.cancel) {this.methods.onClickCancel(e)this.setData({showModal: false})} else if (e.target.dataset.comfirm) {this.methods.onClickComfirm(e)this.setData({showModal: false})}} ,},});

解决：

应该把:onClickCancel(), onClickComfirm() 这2个方法放在methods{}里面，

但是放进去之后还是报错。

原因是调用格式语句写错了：

this.methods.onClickCancel(e)

this.methods.onClickComfirm(e)

改成：

this.onClickCancel(e)

this.onClickComfirm(e)

最终代码

附上自定义弹窗的整个案例源码：

Component({properties: {showModal: true},data: {},lifetimes: {attached() {console.log(">>showModal", this.data.showModal)}},methods: {onClickMask(e) {console.log(">>>点击 onClickMask", e)console.log(this)if (e.target.dataset.cancel) {this.onClickCancel(e)this.setData({showModal: false})} else if (e.target.dataset.comfirm) {this.onClickComfirm(e)this.setData({showModal: false})}},onClickCancel(e) {console.log('>>点击了取消')this.triggerEvent('onclickcancel')},onClickComfirm(e) {console.log("点击了确认")this.triggerEvent('onclickcomfirm')}},});

<view clase="modal" wx:if="{{showModal}}"><view class="mask" bind:tap="onClickMask"><view class="dialog"><view class="title">提示</view><view class="content">请确认支付1869.00元</view><view class="btn"><view class="cancel" data-cancel >取消</view><view class="sure" data-comfirm >确认</view></view></view></view></view>

wxss


.modal {position: relative;color: #F7F7F7;opacity: 0.96;z-index: 199;width: 100%;height: 100%;background-color: antiquewhite;
}/*通过固定位置fixed 来实现页面居中*/
/*.mask {*/
/*  !*height: 100%;*!*/
/*  !*width: 750rpx;*!*/
/*  !*position: fixed;*!*/
/*  !*top: 0;*!*/
/*  !*bottom: 0;*!*/
/*  !*left: 0;*!*/
/*  !*right: 0;*!*/
/*  display: flex;*/
/*  justify-content: center;*/
/*  align-items: center;*/
/*  background-color: rgba(0, 0, 0, 0.2);*/
/*}*/.mask {width: 100%;height: 100%;z-index: 198;position: absolute;top: 0;bottom: 0;left: 0;right: 0;margin: auto;display: flex;justify-content: center;align-items: center;background-color: rgba(0, 0, 0, 0.8);/*background-color: #bfc;*/
}.dialog {width: 600rpx;height: 320rpx;box-sizing: border-box;overflow: hidden;background-color: #fff;border-radius: 20rpx;
}.btn {height: 100rpx;display: flex;justify-content: space-evenly;flex-direction: row;border-top: 1rpx solid #eee;
}.title {width: 100%;font-size: 38rpx;padding: 28rpx 0 10rpx;font-weight: 700;text-align: center;
}.content {height: 120rpx;box-sizing: border-box;font-size: 30rpx;overflow: hidden;padding: 18rpx 28rpx;color: #333333;text-align: center;
}.cancel, .sure {line-height: 100rpx;box-sizing: border-box;width: 50%;font-weight: 600;font-size: 36rpx;text-align: center;border-right: 1rpx solid #eee;
}.cancel {color: #959595;
}.sure {color: #F15D21;
}

运行：点击取消按钮，与点击确认按钮打印正常了，调用组件的页面收到事件log：