Question

我需要在我的vue应用程序中使用可重用的全局对话框/模态组件。我需要能够从任何组件调用它，并在模态上按下解除按钮后更新其标题文本，正文和回调函数。我已经尝试将自定义对话框组件导入到我计划使用它的每个组件中，并且我尝试创建一个全局对话框，其中的值将使用modals vuex模式中的可变值进行设置。后者不起作用，因为vuex不会将函数存储为值。我是vue的新手，我不太确定如何解决这个问题，绝对任何有关它的好方法的建议都会有很大的帮助。

Answer 1

我以前做过类似的事情。主要成分是通过$root处理事件，因为在这种情况下您无法通过常规组件通信进行中继。

// In your Global Modal
<script>
export default {
    name: 'GlobalModal',
    mounted () {
        this.$root.$on('callGlobalModal', () => {
            this.dialog = true
        })
    },
    data: () => ({
        dialog: false,
    }),
}
</script>

然后使用this.$root.$emit('callGlobalModal')

从任何地方调用它

使用vue进行全局对话框实现

1 个答案: