Vuejs setting up event bus

Question

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
    }
});

Now in the first component

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

components:{
    ChildComponent //local component
}

Now on the child component

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

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

I was following This to setup

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

d00dle · Accepted Answer · 2017-10-14 16:34:03Z

I usually do a separation with the EventBus.

eventbus.js

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

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.

With complete separation

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

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

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>

i see i thought it would be possible to import it globally and hadle it wit $
I'm not saying it impossible, but I have never seen it anywhere.

Collectives™ on Stack Overflow

Vuejs setting up event bus

1 Answer 1

With complete separation

2 Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

With complete separation

2 Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related