Question

在我的created()钩子中，有以下代码：

{
  created() {
    window.addEventListener('keydown', this.someMethod)
  }, 
  methods: {
    someMethod(event) {
      console.log(event)
      // do stuff
    }
  }
}

控制台日志未触发。我究竟做错了什么？以下作品：

const someMethod = event => {
  console.log(event)
}

export default {
  ... other stuff
  created() {
    window.addEventListener('keydown', this.someMethod)
  },
}

编辑：我的要求似乎有些困惑。我不是在问我如何在函数内使用this关键字。为此，请使用箭头功能。我要问的是，我似乎无法通过该对象的方法作为回调函数。

Answer 1

您应该将回调设置为addEventListener函数的第二个参数，并在其中调用您的方法，建议使用箭头函数来访问回调范围内的this

created() {
window.addEventListener('keydown',(e)=>{

    this.someMethod(e)

})
}

Answer 2

要害所在的是以下代码

created() {
    window.addEventListener('keydown', this.someMethod)
  },

someMethod是fn，调用它的对象引用this。

现在这里this的值是多少。关于dynamic范围的基本定义状态起作用，动态范围fn在调用get而不是写入它们的位置时将具有this的值。

因此，当keydown发生时，实际上是发生事情并按输入进行工作，这意味着-this是window而不是vue上下文。

要解决此问题，我们需要使this处于词法范围内，这意味着this的值应该是写入method的位置。

如第一个答案中所述，

ES6 Arrow 是一个不错的选择

created() {
  window.addEventListener('keydown', () => { 
    // Arrow method makes the value of `this` lexically scoped.
    // If you use normal fn , then again it get dynamically scoped
    this.someMethod()
  })
}

Vue：将`this.foo（）`用作事件监听器方法

2 个答案: