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

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

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

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

但一定有比这更好的解决办法！

对于这类问题，还有一种替代模式，即将回调函数作为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.在哪里处理承诺是很重要的，例如，如果你想在出错的情况下保持模态打开，你可以在模态组件中进行错误处理，或者至少将一些错误转发给它。
1.进一步研究函数的验证是值得的，例如检查它是否真的返回了一个承诺，然后等待它，否则做其他事情。
1.即使只是一点点，这种模式也会给您的解决方案增加一些耦合，因此您不希望用回调函数替换所有事件！