如何在Vue某方法内部的嵌套函数中调用其他Vue方法

你遇到的是普通函数的this指向绑定问题，核心逻辑如下：

• Vue组件中methods里定义的所有方法，都会挂载到组件实例上，必须通过组件实例（正常上下文下的this）才能访问，直接写updateUserToPremium()相当于在全局作用域查找该方法，自然会报未定义错误
• 你给rp.addEventHandler传入的是普通匿名函数，普通函数的this会指向调用它的对象（这里就是Reepay的事件触发器实例），而不是Vue组件实例，所以就算你写this.updateUserToPremium()也找不到对应方法

提供三种常用实现方式，任选其一即可：

方案1：使用箭头函数（最推荐，ES6+支持） #

箭头函数不会自行绑定this，会继承外层作用域的this指向，这里外层testing方法的this就是Vue组件实例，直接调用即可：

testing(userId) {
  var rp = new Reepay.ModalSubscription(sessionId);
  // 把普通函数改成箭头函数
  rp.addEventHandler(Reepay.Event.Accept, (data) => {
    console.log('Success', data);
    this.updateUserToPremium(userId); 
    rp.destroy();
  })
}

方案2：提前存储this指向（兼容性最好，ES5及以下也支持） #

在回调外层提前把Vue实例的this存为变量，回调内部直接用该变量调用方法：

testing(userId) {
  // 提前存下Vue实例指向
  const vm = this;
  var rp = new Reepay.ModalSubscription(sessionId);
  rp.addEventHandler(Reepay.Event.Accept, function(data) {
    console.log('Success', data);
    vm.updateUserToPremium(userId); 
    rp.destroy();
  })
}

方案3：用bind手动绑定this指向 #

通过bind方法强制把回调函数的this绑定为当前Vue组件实例：

testing(userId) {
  var rp = new Reepay.ModalSubscription(sessionId);
  rp.addEventHandler(Reepay.Event.Accept, function(data) {
    console.log('Success', data);
    this.updateUserToPremium(userId); 
    rp.destroy();
  }.bind(this)) // 手动绑定this为当前组件实例
}

内容的提问来源于stack exchange，提问作者Kristofer Mar Einarsson