使用 vuejs 显示带有事件的 flash 消息

Question

我正在尝试执行源代码中 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>

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

我调试也没有报错

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

Answer 1

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

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

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

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

Answer 2

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

基于 Bert 的 "Note that the alert will only show if the flash method is called after the Flash component is created." 回复。

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

使用 vuejs 显示带有事件的 flash 消息

display a flash message with events with vuejs

laravel

vue.js