时间戳

首页 > 解决方案 > Vue.js 模态：如何从模态获得响应？

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

问题描述

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

<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.jsmodal-dialogvue-component

解决方案

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

<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

推荐阅读