显示包含vuejs

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>

我可以在我的视图中看到组件呈现即MY FLASH消息，但我从来没有收到来自发出的警报！

我在调试器中也没有错误

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

Answer 1

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

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

请注意，警告仅显示在创建Flash组件后是否调用flash方法。

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

Answer 2

这是一个古老的问题，但是我陷入了同样的境地，我的解决方案可能不是最好的，但对我来说却是有效的。

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

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