与vue和addEventListener中的数据或方法进行通信

Question

我在使用此代码与我的数据或方法进行通信时遇到问题,

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

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

Answer 1

你是对的,因为this绑定里面没有指向vue实例的绑定

要解决此问题var self = this,请在创建的钩子中定义一个指向vue实例的变量,并使用self回调内部引用data属性

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
  }