VueJS - 收到成功消息后如何自动关闭弹出窗口答案

【问题标题】：VueJS - How to automatically close popup after receiving success messageVueJS - 收到成功消息后如何自动关闭弹出窗口
【发布时间】：2021-05-06 08:55:15
【问题描述】：

我正在使用 Vusax 库的 vs-popup 组件来显示内容，我可以通过下面代码中的方法关闭 vs-popup。我实际上在弹出窗口中有一个表单，所以我的问题是如何在成功消息后自动关闭 vs-popup。

这里是 User.vue

HTML

 <vs-button @click="popupSettings = true" > Settings</vs-button>

<vs-popup title="Settings"  :active.sync="popupSettings ">
    <user-settings>
        <vs-button color="dark" @click="close()">Cancel</vs-button>    //This is the slot
    </user-settings>
</vs-popup>

 close () {
      return this.popupSettings  = false
    },

这里是 UserSettings.vue

HTML

<div class="form-group">
  <slot></slot>
  <vs-button  @click="saveSettings($event)" >Save</vs-button>
</div>

      this.$http.put(/settings, params)
      .then((response) => {
        this.alert('success', 'Success', 'Settings saved successfully!')

        // Here i want to close the vs-popup but that is in User.vue
      })

请帮帮我，我该怎么做。

【问题讨论】：

您可以使用您的.then 从UserSettings.vue 向父级发送一个事件，在父级上观看此事件并在那里调用close()。更丑陋的解决方案是使用$parent 和一些$refs 来触发close()。
能否请您在我的代码中显示它，因为我想知道我哪里出错了
我明白了，非常感谢
我已经写了一个答案来告诉你如何去做（我花了一些时间来重现你的用例）。我不确定我这样做是否可行，或者您是否真的需要在这里传递一个插槽，在这种情况下您可以使用作用域插槽，告诉我，我会向您展示这个例子（更高级一点）。
非常感谢，就像我第一次理解你所说的那样，我实施了，我得到的答案与你发给我的答案相似。所以这里不需要作用域槽。那么你对 ag-grid table 有什么想法吗？

标签： vue.js popup

【解决方案1】：

这是我上面评论的一个例子：https://codesandbox.io/s/nice-firefly-frfkc?file=/src/App.vue

孩子们有趣的部分就在这里

async saveSettings() {
  try {
    const response = await fetch(
      "https://jsonplaceholder.typicode.com/todos/1"
    );
    const json = await response.json();
    if (json) this.$emit("success", true); // emit to the parent
  } catch (err) {
    console.warn("error", err);
  }
},

我已经模拟了一些GET 调用，但您可以使用PUT 以同样的方式处理它。我也使用了async/await 一种更现代的方法，并且仍然会收到一些错误反馈，以防发生不好的事情。

在父级中，观察事件并关闭弹出窗口。

<user-settings @success="closePopup">
  ...
</user-settings>

只有在 AJAX 调用成功时才应该发出事件。

【讨论】：