Vue：将'this.foo()'作为事件侦听器方法传递

bqjvbblv 于 2022-12-19 发布在 Vue.js

关注(0)|答案(3)|浏览(143)

在我的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关键字。你可以使用arrow函数。我的问题是我似乎不能将对象的方法作为回调函数传递。

vue.js

来源：https://stackoverflow.com/questions/57663582/vue-passing-this-foo-as-event-listener-method

3条答案

按热度按时间

disbfnqx1#

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

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

    this.someMethod(e)

})
}

赞(0）回复(0）举报 2022-12-19

qxsslcnc2#

catch在以下代码中

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()
  })
}

赞(0）回复(0）举报 2022-12-19

5lhxktic3#

{
  created() {
  let vm = this // could not use this keyword directly in eventlistener
  window.addEventListener('keydown', vm.someMethod)
  },
}

赞(0）回复(0）举报 2022-12-19

我来回答

Vue：将'this.foo()'作为事件侦听器方法传递

3条答案

相关问题

热门标签

最新问答