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:

SOLID Series: Liskov Substitution Principle (LSP)

A deep dive into the Liskov Substitution Principle with examples, violations, and practical tips for writing scalable, bug-free object-oriented code.

Oyinkansola Awosan
Jun 6, 2025 ⋅ 10 min read
Modern CSS Carousels: No JavaScript Required

Modern CSS carousels: No JavaScript required

This article walks through new CSS features like ::scroll-button() and ::scroll-marker() that make it possible to build fully functional CSS-only carousels.

Saleh Mubashar
Jun 6, 2025 ⋅ 5 min read
hidden coast of developer elitism

It’s time to break the cycle of developer elitism

Let’s talk about one of the greatest problems in software development: nascent developers bouncing off grouchy superiors into the arms of AI.

Lewis Cianci
Jun 4, 2025 ⋅ 9 min read
When To Use Flexbox And When To Use CSS Grid

When to use Flexbox and when to use CSS Grid

Flexbox and Grid are the heart of modern CSS layouts. Learn when to use each and how they help build flexible, responsive web designs — no more hacks or guesswork.

Leonardo Maldonado
Jun 3, 2025 ⋅ 9 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