javascript - 在 vue 和 addEventListener 中与数据或方法通信

<分区>

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

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

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

最佳答案

你是对的，这是因为回调中的 this 绑定(bind)没有指向 vue 实例

为了解决这个问题，在创建的钩子(Hook)中定义一个变量 var self = this 指向 vue 实例，并在回调中使用 self 引用数据属性

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

现在由于回调对变量 self 有一个闭包，它在被调用时引用 vue 实例

作为替代方案，您可以使用箭头函数，它按如下方式在词法上绑定(bind) this

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

关于javascript - 在 vue 和 addEventListener 中与数据或方法通信，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/47549346/

相关文章：

javascript - 注入(inject)非 Angular JS 库