与VUE和AddEventListener中的数据或方法通信

Question

我很难用此代码与我的数据或方法交流

created() {
  document.addEventListener( 'touchstart', function( e ) {
    this.myData = e.changedTouches[ 0 ].screenY
  }
}

我猜这是因为函数的范围，这是在函数内部不起作用的，但是如何与数据进行通信或激活事件侦听器函数之外的任何方法？

Answer 1

您是正确的，这是因为this在回调中绑定而不指向VUE实例

解决此问题定义了指向VUE实例的创建挂钩中的可变var self = this，并在回调中使用self引用数据属性

created() {
  var self = this;
  document.addEventListener( 'touchstart', function( e ) {
    self.myData = e.changedTouches[ 0 ].screenY
  })
}

现在，由于回调已在变量self上关闭，因此引用了VUE实例

作为替代方案，您可以使用箭头函数，将this绑定为词汇如下

created() {
  document.addEventListener( 'touchstart', ( e ) => {
    this.myData = e.changedTouches[ 0 ].screenY
  })
}