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

Posted 2023-02-23

【中文标题】与 vue 和 addEventListener 中的数据或方法通信

【英文标题】：communicating with data or methods in vue and addEventListener [duplicate]

【发布时间】：2018-05-12 23:01:12

【问题描述】：

我无法使用此代码与我的数据或方法进行通信，

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

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

【参考方案1】：

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

为了解决这个问题，在 created 钩子中定义一个变量 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
  )

【讨论】：

在这之后我感觉很愚蠢......我实际上去尝试将它传递给函数，并出现各种错误等等......当我可以在外面读取一个var时。谢谢你的帮助！哇哦，箭头函数其实更好，我不知道它可以这样使用。不错！

很难找到解决方案，谢谢！！

使用箭头函数解决了我的问题