小程序 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：