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:

ai dev tool power rankings

AI dev tool power rankings & comparison [July 2025 edition]

Which AI frontend dev tool reigns supreme in July 2025? Check out our power rankings and use our interactive comparison tool to find out.

Chizaram Ken
Jul 2, 2025 ⋅ 3 min read
how API client automation can save you hours in development

How API client automation can save you hours in development

Learn how OpenAPI can automate API client generation to save time, reduce bugs, and streamline how your frontend app talks to backend APIs.

Lewis Cianci
Jul 1, 2025 ⋅ 7 min read
Interface Segregation Principle

SOLID series: Understanding the Interface Segregation Principle (ISP)

Discover how the Interface Segregation Principle (ISP) keeps your code lean, modular, and maintainable using real-world analogies and practical examples.

Oyinkansola Awosan
Jun 30, 2025 ⋅ 7 min read
​​How HTML’s Selectedcontent Element Improves Dropdowns

​​How HTML’s <selectedcontent> element improves dropdowns

is an experimental HTML element that gives developers control over how a selected option is displayed, using just HTML and CSS.

Temitope Oyedele
Jun 27, 2025 ⋅ 6 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