Question

我正在尝试从外部应用程序将异步函数作为属性传递给vuejs组件，但是遇到以下问题。

比方说，在我的非vue组件中，我定义了此功能

var myComponent = {
     myVar: "test",
     myFunc: async function (cookie) {
              console.log(this.myVar); //yields an error in the vue instance but works normally in the component
              return await new Promise((resolve, reject) => {
                //if success
                let success = true;
                if (success) {
                  setTimeout(function() {
                    resolve('Saved after 5000ms: ');
                  }, 5000);
                } else {
                  reject('An error occurred');
                }
              });
            },
    }

在一个系统中我有一个asyncFunc1在另一个asyncFunc2中，它们都执行相同的工作，但是对各自的环境使用完全不同的方式，并且两个系统都将通过传递自己的函数作为prop来初始化相同的vue组件。在Vue组件中使用此功能是因为需要在不同的外部环境中以不同的方式进行定义。

var component = this;
var vm = new Vue({
            i18n,
            el: '#app',
            render(h) {
              return h(App, {
                props: {
                  myFunc: component.myFunc, //async function
                },
                ref: 'test',
              });
            },
          });

我的Vue组件会在通过内部方法完成自己的工作之前调用通过prop传递的函数。

所以现在我的问题是，当函数作为道具传递时，对this的引用从原始Component更改为Vue实例，因此我无法正确使用我的函数。假定对象和函数在props中通过引用传递，但在这里似乎并非如此。

我该如何克服这个问题？

如何在vuejs中正确传递异步函数作为prop

0 个答案: