如何在Vue.js中正确传递异步函数作为Props并解决this指向问题

这个问题的核心是JavaScript中函数的this绑定机制——当你把函数作为props传递给Vue组件后，它的this上下文会在调用时被切换到Vue实例，而不是原来的myComponent对象。下面是几种可行的解决办法：

方法1：用bind()锁定原上下文 #

bind()方法可以永久把函数的this绑定到指定对象，这样不管这个函数在哪里被调用，this都会指向你绑定的原组件。修改Vue初始化代码即可：

var component = this;
var vm = new Vue({
  i18n,
  el: '#app',
  render(h) {
    return h(App, {
      props: {
        myFunc: component.myFunc.bind(component), // 绑定this到原component对象
      },
      ref: 'test',
    });
  },
});

这个方法的好处是不需要修改原函数的定义，直接在传递的时候处理即可，唯一的小缺点是每次bind都会创建一个新的函数实例，但这种开销在大多数场景下可以忽略不计。

方法2：用箭头函数包裹传递 #

箭头函数没有自己的this，它会继承外层作用域的this。我们可以用箭头函数把原函数包裹起来，这样调用时this会指向原组件：

var component = this;
var vm = new Vue({
  i18n,
  el: '#app',
  render(h) {
    return h(App, {
      props: {
        // 如果函数有多个参数，用...args来接收并传递
        myFunc: (...args) => component.myFunc(...args),
      },
      ref: 'test',
    });
  },
});

这种方式语法简洁，同样不需要修改原函数。如果原函数参数固定，也可以直接写具体参数，比如(cookie) => component.myFunc(cookie)。

方法3：修改原函数为箭头函数（如果允许修改原组件） #

如果你有权限修改myComponent的定义，可以把myFunc改成箭头函数。箭头函数的this是在定义时就确定的，会绑定到它所在的对象（也就是myComponent），这样不管函数被传递到哪里，this都不会变：

var myComponent = {
  myVar: "test",
  // 改成箭头函数，this始终指向myComponent
  myFunc: async (cookie) => {
    console.log(this.myVar); // 现在能正常访问myVar了
    return await new Promise((resolve, reject) => {
      let success = true;
      if (success) {
        setTimeout(function() {
          resolve('Saved after 5000ms: ');
        }, 5000);
      } else {
        reject('An error occurred');
      }
    });
  },
}

这个方法是一劳永逸的，后续传递函数时不需要额外处理，但前提是你能修改原组件的代码。

内容的提问来源于stack exchange，提问作者gabtzi