Vue 模态关闭后的动作

Question

我想要自定义弹出消息来确认删除操作。我已经写好了，但我对如何将它连接到我的应用程序有疑问。我单击记录旁边的 'X' 按钮，然后弹出模式，我在其中确认我确定我在做什么，然后删除记录。如何让我的函数等待来自模态

的信息

Answer 1

您需要通过自定义事件进行亲子交流：

// Main component
<template>
  <div>
    <your-modal-component @accept="deleteEntity"></your-modal-component>
  </div>
</template>

<script>
export default {
  methods: {
    deleteEntity() {
      // your delete functionality
    },
  },
};
</script>

// modal component
<template>
  <div>
    your modal code here
    <button @click="$emit('accept')">Accept</button>
  </div>
</template>

当用户点击删除按钮时，您首先必须显示您的模式。之后，您只需在接受的情况下发出事件。在您的主要组件中，您会收听该事件并随后触发您的删除功能。

有关 Vue 中父子通信的更多信息，请参阅 docs。

Vue 模态关闭后的动作

Action after modal close in Vue

javascript

modal-dialog

vue.js