Vue.js设置事件总线 [英] Vuejs setting up event bus

问题描述

所以在我的根app.js中，

So in my root app.js i have

window.Vue = require('vue');
const EventBus = new Vue()

Object.defineProperties(Vue.prototype, {
    $bus: {
        get: function () {
            return EventBus
        }
    }
})

const app = new Vue({
    el: '#backend',
    EventBus,
    components: {
        FirstComponent
    }
});

现在在第一个组件中

clickbtn(){
    this.$bus.$emit('test', { "testval":"setting up event bus" })
}

components:{
    ChildComponent //local component
}

现在在子组件上

created(){
    this.$bus.$on('test', ($event) => {
        console.log('Test event triggered', $event)
    })
}

由于连console.log(this)都没有$ bus，我在哪里出错了?

Where am i going wrong in the setup since even console.log(this) doesnt have $bus in it.

我正在关注此设置

我仍然想使用$ bus，因为它看起来很好并且组织得井井有条.我如何实现它.

I still would like to use $bus as it looks good and abit organized.How do i make it happen.

推荐答案

我通常与EventBus分开.

I usually do a separation with the EventBus.

eventbus.js

import Vue from 'vue';
export const EventBus = new Vue();

然后，我只需在需要侦听事件的每个组件中进行导入.在更大的项目上，我什至会创建一个events.js和eventListener.js文件，然后在那里处理所有内容.

Then i simply do an import in every component that needs to listen for event. On bigger projects I would even create a events.js and eventListener.js file and then handle everything there.

eventbus.js

这将是我们的事件总线，并且在所有其他地方都可以使用.

This will be our event bus and is used from all other places.

import Vue from 'vue';
export const EventBus = new Vue();

event.js

此文件基本上是常见事件的库.这样可以更容易维护.

This file is basically a library of common events. This makes it easier to maintain.

import { EventBus } from './Eventbus.js';
import { Store } from './Store.js'; // If needed

class Event {

    // Simple event
    static showMessage(message) {
        EventBus.$emit('showMessage', message);
    }
}

eventlistener.js

我们常见事件的事件监听器.同样，这使得维护更容易.这可能在同一个事件文件中，但我喜欢这种分隔.

Event listener for our common events. Again this makes it easier to maintain. This could be in the same event file, but I like the separation.

import { EventBus } from './Eventbus.js';

class EventListener {

    // Simple event listener
    static showMessage() {
        EventBus.$on('showMessage', function() {
            alert(message);
        });
    }

    // Simple event listener with callback
    static showMessage(callbackFunction) {
        EventBus.$on('showMessage', callbackFunction);
    }
}

ComponentA.vue

随机成分.导入在vue组件中某处使用的EventBus和Event集合.

A random component. Imports the EventBus and Event collection as it is used somewhere in the vue component.

<template>
    *SOME HTML*
</template>

<script>

    import { Event } from 'event.js'
    import { EventBus } from 'eventbus.js';

    export default {
        methods: {
            throwAlert: function() {
                Event.showMessage('This is my alert message');
            }
        }
    }
</script>

ComponentB.vue

随机成分.导入EventBus和EventListener集合，因为它假定会对事件总线上的事件做出反应.

A random component. Imports the EventBus and EventListener collection as it is suppose to react on events on the eventbus.

<template>
    *SOME HTML*
</template>

<script>

    import { EventListener } from 'eventlistener.js'
    import { EventBus } from 'eventbus.js';

    export default {
        mounted() {

            // Will start listen for the event 'showMessage' and fire attached function defined in eventlistener.js
            EventListener.showMessage();

            // Will start listen for the event 'showMessage' and execute the function given as the 'callbackFunction' parameter. This will allow you to react on the same event with different logic in various vue files.
            EventListener.showMessage(function(message) {
                alert(message);
            });
        }
    }
</script>

这篇关于Vue.js设置事件总线的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！