使用 vuejs 显示带有事件的 Flash 消息答案

【问题标题】：display a flash message with events with vuejs使用 vuejs 显示带有事件的 Flash 消息
【发布时间】：2017-10-11 22:11:54
【问题描述】：

我正在尝试执行源代码中的here，但它不起作用。

但事件已发送但从未收到。

这是我能做的最简单的例子：

在 bootstrap.js 中：

window.events = new Vue();

window.flash = function (message, level = 'success') {
    console.log('emit'); // This is working
    window.events.$emit('flash', { message, level });
};

Vue.component('flash', require('./vue/components/Flash.vue'));

Flash.vue：

<template>
    <div> MY FLASH</div>
</template>

<script>
    export default {
        created() {
            window.events.$on(
                'flash', data => alert('event!!!')
            );
        },
    };
</script>

在我看来：

<flash></flash>

我可以在我的视图中看到组件渲染，即 MY FLASH 消息，但我从未收到来自 emit 的警报！

我的调试器也没有错误

我错过了什么吗？看起来很简单....

【问题讨论】：

你在某处打电话给flash()吗？
现在，我简化了它来寻找bug，我不调用flash()，我只是调用alert('event') 来知道它是否被触发。我知道window.events.$emit('flash'); 是否已被调用，但从未收到
好的，我应该在哪里调用它？在任何 vue 组件中？？？
那么，你知道，console.log('emit') 被解雇了吗？
嗯，让我看看，我会尽快试一试

标签： laravel vue.js

【解决方案1】：

您问题中的代码设置了一个名为flash 的全局函数来触发事件。必须在 somewhere 调用该函数才能触发事件。

这是演示的a codesandbox。除了触发事件之外的所有内容都来自您的代码。

请注意，只有在创建 Flash 组件后调用 flash 方法时才会显示警报。

另外，请记住在组件被销毁时使用总线移除监听器，以防止在多次创建组件时添加多个监听器。

【讨论】：

是的，它正在工作....我不明白的是，如果我已经有了`console.log('emit'); 为什么还需要调用 flash() 方法； // 这是工作 ` 工作？？？我会再读一遍 vuejs 文档 :) 谢谢！
@JuliatzindelToro 您可能正在在某处调用flash，但它在在创建Flash.vue 组件之前被调用。如果是这种情况，那么控制台会发出输出，但不会显示警报。

【解决方案2】：

这是一个老问题，但我遇到了同样的情况，我的解决方案可能不是最好的，但对我有用。

基于此响应“请注意，只有在创建 Flash 组件后调用 flash 方法时才会显示警报。”通过伯特。

flash 组件可能有一些用例，如果您想在同一个视图/页面中使用它会很好，因为该组件已安装并且仍然没有触发任何事件。但是，如果您想使用 vue 路由器在视图/页面转换中使用，您将需要使用 vuex 来存储您的警报消息，然后获取并显示警报。

【讨论】：