如何在父组件中发送模态结果 [英] How to send modal result in parent component

问题描述

我正在将vuejs与bootstrap-vue一起使用.我有两个组成部分.对象列表和我的模态.当我单击一个特定的按钮时，我打开我的模态.通常，我的模态询问:您确定要删除这些记录吗?"例如.

I'm using vuejs with bootstrap-vue. I have two components. A list of objects, and my modal. I open my modal when I click on a particular button. Typically, my modal asks : "Are you sure you want to delete these records ?" for instance.

一切正常，但我不知道如何在父组件中检索模态的结果(如果我单击确定"或取消" ...).

Everything works fine but I don't know how to retrieve the result of the modal in my parent component (if I clicked on 'ok', or 'cancel',...).

我应该怎么做?

由于我的模态是以这种方式打开的:

Since my modal is opened this way :

在我的父组件(列表)中:

In my parent component (the list) :

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)
}

在我的模态组件中:

In my modal component :

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

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

Should I do it simply by returning the value with my methods ?

还是我应该采用vuejs的方式并将变量发送给父对象?

Or should I do the vuejs way and emit a variable to the parent ?

我希望自己的流程是(伪代码):

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

推荐答案

所以我最终提出了3种不同的方法来实现这一目标.

So i ended up making 3 different ways of accomplishing this.

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

此方法使用已内置的确认MessageBox返回承诺，该承诺将在解决后返回是否单击 OK 按钮.

This method uses the already built-in Confirm MessageBox which returns a promise that return whether the OK button was clicked or not, when resolved.

从孩子到父母的发光: https://codesandbox.io/s/modal-send-answer-到父级3olms

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

This method $emit's a custom event to the parent, which can then be used to run a desired method. It can also pass up data to the parent, like a specific item to delete like in the codesandbox.

兑现自己的诺言: https://codesandbox.io/s/modal-send-answer-to-parent-py3nm

这在我们的自定义模式组件中实现了一个promise，以获得与Bootstrap-Vue具有的 MsgConfirmBox 类似的行为.我个人认为此方法有点简单"，因为您必须针对各种情况进行更多的错误处理，才能正确地解决/拒绝承诺.

This implements a promise in our custom modal component, to gain similar behavior to the MsgConfirmBox that Bootstrap-Vue has. I personally think this method is a bit "sketchy", as you'll have to do more error handling for various scenarios to resolve/reject the promise properly.

这篇关于如何在父组件中发送模态结果的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！