Question

我正在使用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没有经验，这是我第一次尝试模态窗口，所以我真的不知道我在这里缺少什么，文档也很糟糕。

Answer 1

如果您希望它在模式组件之外运行，则可以链接事件。

<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

Answer 2

查看“事件”部分：有一个闭合事件可以挂接到。

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

Answer 3

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

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

Answer 4

我刚刚在本地试用了此软件包。 @closed挂钩确实按设计工作。我使用的标记如下

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

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

Answer 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");
    },

我希望这会有所帮助。

Vue.js模态：如何获得模态响应？

5 个答案: