Vue async / await 与 $emit

Question

我有一个对话框组件，它在提交时执行两个异步函数。我的目标是保持对话框打开并显示加载状态，直到两个功能都完成。之后，我想关闭对话框。

我在父组件中定义的提交函数如下所示：

 async submit() {
    await this.foo1();
    await this.foo2();
}

这个函数作为一个 prop 传递给对话框组件：

<app-dialog @submit="submit" />

在我的对话框组件中，单击按钮时，我尝试这样做：

async onClick() {
    await this.$emit('submit');
    this.closeDialog();
},

但是，对话框会立即关闭，而不是等待执行提交。完成此任务的最佳方法是什么？

Answer 1

我设法通过在对话框组件中传递回调来找到解决方案：

submit() {
    this.$emit('submit', () => this.closeDialog())
},

然后在我的父组件中调用该回调：

async submit(closeDialog) {
    await this.foo1();
    await this.foo2();
    closeDialog()
}

但一定有比这更好的解决方案！

Answer 2

对于这类问题还有另一种模式，即将回调函数作为道具传递。

在您的对话框组件上：

props: {
  onSubmit: {
    type: Function,
    required: true // this is up to you
},

[...]

// in your methods
async onClick() {
  if (this.onSubmit && typeof this.onSubmit === 'function') {
    await this.onSubmit();
  }
  this.closeDialog();
}

然后，在你的父组件中：

<app-dialog :on-submit="submit" />

[...]

// in your methods:

async submit() {
  await this.foo1();
  await this.foo2()
}

请记住一些事情

1. 在哪里处理你的承诺很重要。例如，如果您想在出现错误时保持 modal 处于打开状态，您可以在 modal 组件中进行错误处理，或者至少将一些错误转发给它。

2. 值得进一步探索函数的验证，例如检查它是否真的返回了一个承诺，然后等待它，否则做其他事情。

3. 即使只是一点点，这种模式也会给你的解决方案增加一点耦合，所以你不想用回调函数替换所有事件！