Vue methods 用箭头函数取不到 this

const App = new Vue({
    el: 'body',

    methods: {
        foo: () => {
            console.log(this) // undefined
        }
    }
})
const App = new Vue({
    el: 'body',

    methods: {
        foo () {
            console.log(this) // Vue instance
        }
    }
})

对 Vue 不熟,请教一下各位大神这是什么原因

回答:

首先,看文档 http://cn.vuejs.org/api/

实例方法。实例可以直接访问这些方法,也可以用在指令表达式内。方法的 this 自动绑定到实例。
在vue的methods的this是自动绑定的

然后见代码:https://github.com/vuejs/vue/…

function initMethods (vm: Component) {
  const methods = vm.$options.methods
  if (methods) {
    for (const key in methods) {
      vm[key] = methods[key] == null ? noop : bind(methods[key], vm)
      if (process.env.NODE_ENV !== 'production' && methods[key] == null) {
        warn(
          `method "${key}" has an undefined value in the component definition. ` +
          `Did you reference the function correctly?`,
          vm
        )
      }
    }
  }
}

你用箭头函数,会返回一个绑定当前执行上下文中的this,而且这个this,不可再切换更改了。你此处绑定的 this 是当前函数体内的this,严格模式下为undefined;

回答:

http://vuejs.org/api/
文档中有描述

   Note that you should not use an arrow function to define a method (e.g. plus: () => this.a++). The reason is arrow functions bind the parent context, so this will not be the Vue instance as you expect and this.a will be undefined.

回答:

如果是要获取调用该方法的元素可以用官方文档提供的方法:
methods: {

greet: function (event) {
  // 方法内 `this` 指向 vm
  alert('Hello ' + this.name + '!')
  // `event` 是原生 DOM 事件
  alert(event.target.tagName)
}

回答:

函数体内的this对象,就是定义时所在的对象,而不是使用时所在的对象。

http://es6.ruanyifeng.com/#do…箭头函数

暂无评论

发表评论

您的电子邮箱地址不会被公开。 必填项已用*标注