当我移动到下一个 v-dialog 时关闭上一个 v-dialog

Question

，我正在玩一个新的 vuetify 项目。我已经使用 v-dialog 实现了登录和注册，并且我正在从多个组件中调用这些 v-dialogs。基本上它对我有用，但我希望在单击按钮弹出下一个 v-dialog 时关闭上一个对话框。

目前工作：

1) 登录按钮放置在导航栏中。当单击该按钮时，会弹出登录 v-dialog。

1. 在登录页面上有另一个按钮，它将打开一个 v 对话框，用户可以在其中选择帐户类型。选择一个按钮后，另一个 v-dialog 会作为登录页面打开。

我需要的解决方案：

在弹出新对话框时我可以关闭前一个对话框的方法或逻辑

敬请期待一些想法 干杯

Answer 1

如果这些对话框位于不同的组件中，eventBus 可能是非父子组件之间通信的最佳方式：

1. 在“main.js”中：

new Vue({
    data: {
        eventHub: new Vue()
    },
    ...
}).$mount("#app")

1. 在您的对话框组件或包含该对话框的组件中：

created() {    
    this.$root.eventHub.$on("close-dialog", () => {
        do something to close your dialog, such as this.visible = false
    })
}

1. 在打开新对话框之前：

this.$root.eventHub.$emit("close-dialog")