Last active
June 7, 2024 17:42
-
-
Save JonasDoebertin/e87cb10df9393c3fb4c99731191cad23 to your computer and use it in GitHub Desktop.
Building a global event bus for Vue.js
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
// Using the most basic event bus | |
import Vue from 'vue'; | |
import Bus from './basic'; | |
Vue.component('my-first-component', { | |
methods: { | |
sampleClickAction() { | |
Bus.$emit('my-sample-event'); | |
} | |
} | |
}); | |
Vue.component('my-second-component', { | |
created() { | |
Bus.$on('my-sample-event', () => { | |
// Do something… | |
}); | |
} | |
}); |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
// The most basic event bus | |
// Imprt vue.js | |
import Vue from 'vue'; | |
// Create empty vue.js instance to use as event bus | |
const Bus = new Vue({}); | |
// Export event bus instance | |
export default Bus; |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
Another example, using the bus in a slightly different way.