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:

Gemini CLI tutorial — Will it replace Windsurf and Cursor?

Gemini CLI tutorial — Will it replace Windsurf and Cursor?

Discover how to use Gemini CLI, Google’s new open-source AI agent that brings Gemini directly to your terminal.

Chizaram Ken
Jul 10, 2025 ⋅ 8 min read
React & TypeScript: 10 Patterns For Writing Better Code

React & TypeScript: 10 patterns for writing better code

This article explores several proven patterns for writing safer, cleaner, and more readable code in React and TypeScript.

Peter Aideloje
Jul 10, 2025 ⋅ 11 min read
A Guide To Wrapper Vs. Container Classes In CSS

A guide to wrapper vs. container classes in CSS

A breakdown of the wrapper and container CSS classes, how they’re used in real-world code, and when it makes sense to use one over the other.

Temitope Oyedele
Jul 7, 2025 ⋅ 10 min read
Stagehand and Gemini logos on a gradient background symbolizing AI web automation

How to build a web-based AI agent with Stagehand and Gemini

This guide walks you through creating a web UI for an AI agent that browses, clicks, and extracts info from websites powered by Stagehand and Gemini.

Elijah Asaolu
Jul 4, 2025 ⋅ 8 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