Vue.js modal：如何从模态中获得响应？答案

【问题标题】：Vue.js modal: How can I get response from modal?Vue.js modal：如何从模态中获得响应？
【发布时间】：2019-06-22 09:16:44
【问题描述】：

我正在使用Vue.js modal 包，但我不知道如何从我的模式窗口中获取响应数据。我为我的模态窗口创建了一个组件。组件用法如下所示：

<MyModal :data="data"
         @closed="modalClosed"/>

我想从关闭的事件中获取数据。我打开我的模式：

this.$modal.show('my-modal')

然后关闭它：

<button type="button" @click="$modal.hide('my-modal', {success: true})" class="delete mr-3" aria-label="Close">
  <span aria-hidden="true">&times;</span>
</button>

我的模态在 MyModal 组件中定义（我省略了 html 和脚本代码）：

<template>
  <modal
      name="my-modal"
      transition="nice-modal-fade"
      :delay="100"
      :width="'100%'"
      :height="'auto'"
      :classes="['v--modal', 'col-xl-6', 'col-lg-6', 'col-md-8', 'col-sm-12', 'col-xs-12', 'offset-md-2', 'offset-lg-3', 'offset-xl-3']"
      :scrollable="true"
      :adaptive="true"
      :maxHeight="100">
  </modal>
</template>

@closed 钩子在模态框内有效，但在我需要的地方无效。我对 Vue.js 没有任何经验，这是我第一次尝试模态窗口，所以我真的不知道我在这里缺少什么，而且文档真的很糟糕。

【问题讨论】：

标签： vue.js modal-dialog vue-component

【解决方案1】：

查看事件部分：有一个您可以挂钩的已关闭事件。

https://www.npmjs.com/package/vue-js-modal#events

【讨论】：

你能设置一个密码箱或类似的东西来看看发生了什么吗？

【解决方案2】：

您是否尝试过使用“关闭前”事件处理程序而不是“关闭”？

据我了解，在“关闭”事件中，它不会从组件中发出任何数据，因此，您无法在父组件中获取它。

【讨论】：

【解决方案3】：

我刚刚在本地试用了这个包。 @closed 钩子确实按设计工作。我使用的标记如下

<button @click="show">show modal</button>
<modal
  name="my-modal"
  @closed="closedEvent"
>
  modal content
</modal>

您肯定需要在模态组件上添加name 属性。看来你没有那个。

【讨论】：

我已经命名了我的模态，否则当你调用 $modal.show() 时它不会弹出。我已经更新了这个问题。 @close 钩子有效，但在外面不起作用（在我称之为模态的视图上）。

【解决方案4】：

如果您希望它在您的模态组件之外工作，您可以链接一个事件。

<button @click="show">show modal</button>
<modal
  name="my-modal"
  @closed="closedEvent"
>
  modal content
</modal>

然后在你的方法 obj 中，你可以从你的 @closed 事件中发出另一个事件

methods: {
  closedEvent() {
    this.$emit('chainClosedEvent', this.componentDataGoesHere)
  } 
}

看看这个小提琴https://jsfiddle.net/caseyjoneal/sm6gu1je/299/

如果您最终需要整个应用程序中的模态数据，您应该查看vuex

【讨论】：

【解决方案5】：

如果有人在寻找解决方案，我编码如下：

在调用模态的视图中：

定义模态组件和将引发的事件：

    <template>
    ...
      <grupo-alteracao @fechado="grupoAlteracaoFechado"/>
      <grupo-novo @fechado="grupoNovoFechado"/>
    </template>

    <script>
    ...
    import GrupoAlteracao from '@/views/GrupoAlteracao.vue'
    import GrupoNovo from '@/views/GrupoNovo.vue'


    export default {
      name: 'grupo',
      components:{
      GrupoAlteracao,
      GrupoNovo,  
     },
   ...

     methods: {
       novo: function(){
         this.$modal.show('grupo-novo');
       },
       alterar: function(){
         this.$modal.show('grupo-alteracao',this.selecionado);
       },
       grupoAlteracaoFechado(event){
         this.pesquisarGrupos();
      },
      grupoNovoFechado(event){
        this.pesquisarGrupos();
      },
     }

在模态中引发事件（fechado）：

    <template>
    <modal name="grupo-alteracao"
         :width=largura
         :height="268"
         :clickToClose="false"
         @before-open="beforeOpen"
         @before-close="beforeClose" 
         style="z-index: 49">
     ...
    </modal>
    </template>
    ...
    ...
    methods: {
    beforeOpen (event) {
       this.grupo = event.params;
    },
    beforeClose (event) {
      this.$emit("fechado");
    },

我希望这会有所帮助。

【讨论】：