2023-06-14
1700
#vue
Nwose Lotanna
6147
Jun 14, 2023 ⋅ 6 min read

Using event bus in Vue.js to pass data between components

Nwose Lotanna Web Developer and Writer

Recent posts:

angular vs react

Angular vs. React: Which one should you choose?

Explore the key differences between Angular and React, their strengths, and use cases to help developers decide which option to choose.

Oscar Jite-Orimiono
Apr 2, 2025 ⋅ 5 min read
axios in javascript

Axios in JavaScript: How to make GET, POST, PUT and DELETE requests

Learn how to use Axios in JavaScript for GET, POST, PUT & DELETE requests. Examine setup, error handling, and API best practices.

Faraz Kelhini
Apr 1, 2025 ⋅ 19 min read
how AI is shaping the future of 3D web development

How AI is shaping the future of 3D web development

AI for 3D web development is taking the internet by storm. Learn about this trend, the best tools for 3D web experiences, and how it’ll affect the development landscape moving forward.

Elijah Asaolu
Apr 1, 2025 ⋅ 5 min read
docker exit code 1

How to troubleshoot exit code 1 in Docker

exit code 1 is one of the most common and frustrating errors for developers working in Docker. Explore what it means and how to fix it.

Ukeje Goodness
Apr 1, 2025 ⋅ 4 min read
View all posts

7 Replies to "Using event bus in Vue.js to pass data between components"

  1. Sounds good! But could be better solution pass the bus object as prop to the different components, isn’t it? To be able to decouple as much as possible to the “parent” or to be independent from the project.

    What do u think?

  2. I have that feeling that having an EventBus in Vue is an anti-pattern, especially if you’re using VueX but I can’t quite put my finger on it. At the point you want to be sharing data like that, wouldn’t it be better to use a store to handle all of those “events” / “mutations”?

    It’s not a well formed or versed opinion yet, but I’d be happy for some external thoughts on the matter.

  3. I agree, there’s something that feels wrong about an EventBus.

    Perhaps because it feels like a global variable and difficult to manage the state of the events? How hard would it be to maintain a bus that 7 different components are listening/firing events to?

  4. Your instincts are correct, this is basically a version of the Publish/Subscribe pattern (pub-sub), and at a small scale it works fine, great even. But once things get bigger, not so much. You will want to use some sort of state management architecture to manage things. Vuex uses the Flux pattern, though you could roll your own for smaller projects that don’t need it.

    https://en.wikipedia.org/wiki/Publish%E2%80%93subscribe_pattern#Disadvantages

  5. From my experience, this eventBus approach will lead you down the flames of hell. 😀
    I agree this seems like a very convienent approach to avoid bubbling up through multiple components, but it doesn’t mean you should do it.
    Developers get confused whether this is better than passing down props/emitting events, and basically just go for the eventBus every time, even when the shouldn’t, just because it’s easy. After a few weeks, you will realize your code has just become a huge pile of noodles/spaghettis (take your pick :D) where developers (team of 7, hard to track everything) used the event bus to also pass properties down to the children, and the whole purpose of having self-contained components, with one-way data flow, that you can test in isolation, is just gone forever. You opened the world of X-way data flow, where the event handlers add their own concerns to the data before passing it to the next.
    In the long run, you will forget which component is responsible for owning the data, and where is your source of truth.
    As a solution, not a silver bullet but a good compromise, I’d recommend having a look at Vuex (or something redux-like)

Leave a Reply