如何在父组件中发送模态结果

Question

我正在使用 vuejs 和 bootstrap-vue。我有两个组件。对象列表和我的模式。当我单击特定按钮时，我会打开模式。通常，我的模式会询问：“您确定要删除这些记录吗？” 例如。

一切正常，但我不知道如何在父组件中检索模式的结果（如果我单击“确定”或“取消”，...）。

我该怎么办呢？

由于我的模式是这样打开的：

在我的父组件（列表）中：

deleteSelectedGroups () {
  const modalOptions = {
    action: 'delete',
    records: this.selectedGroups,
    recordFields: ['name', 'usersCount'],
    okTitle: 'Delete',
    okVariant: 'danger'
  }
  this.showModalConfirmation(modalOptions)
  // ...
  // if result of modal is true then ...
},

showModalConfirmation (modalOptions) {
  this.$refs.ModalConfirmation.show(modalOptions)
}

在我的模态组件中：

show (modalOptions) {
  for (let option in modalOptions) {
    this[option] = modalOptions[option]
  }
  this.$bvModal.show('modalConfirmation')
}

我应该简单地通过用我的方法返回值来做到这一点吗？

或者我应该采用 vuejs 方式并向父级发出一个变量？

编辑：我希望我的流程如何（伪代码）：

deleteselectedGroups () {
  openModal()
  modalAnswer = modal.getAnswer()
  if (modalAnswer === 'OK') {
    deleteMyRecords() 
  }
}

Answer 1

所以我最终采用了 3 种不同的方法来实现这一目标。

使用 MsgConfirmBox 的内置承诺 https://codesandbox.io/s/modal-send-answer-to-parent-3vbiv

此方法使用已经内置的Confirm MessageBox，它返回一个承诺，OK在解决时返回按钮是否被单击。

从子级发送到父级： https ://codesandbox.io/s/modal-send-answer-to-parent-3olms

此方法$emit是父级的自定义事件，然后可用于运行所需的方法。它还可以将数据传递给父级，例如要删除的特定项目，如codesandbox中的那样。

实现自己的承诺： https://codesandbox.io/s/modal-send-answer-to-parent-py3nm

这在我们的自定义模态组件中实现了一个承诺，以获得与MsgConfirmBoxBootstrap-Vue 类似的行为。我个人认为这种方法有点“粗略”，因为您必须对各种场景进行更多的错误处理才能正确解决/拒绝承诺。