Vue 异步/等待与 $emit

Question

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

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

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

该函数作为 props 传递给对话框组件：

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

在我的对话框组件中，单击按钮后，我尝试执行以下操作：

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

但是，对话框会立即关闭，而不是等待执行提交。实现这一目标的最佳方法是什么？

Answer 1

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

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

然后在父组件上使用@submit="submit"，并定义“提交”：

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

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

Answer 2

对于此类问题，还有一种替代模式，即将回调函数作为 prop 传递。

在您的对话框组件上：

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. 在哪里兑现承诺很重要。例如，如果您想在出现错误时保持模式打开，您可以在模式组件中进行错误处理，或者至少将一些错误转发给它。

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

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