Search code examples
vue.jsvuex

vue emit once on multiple


I'm using Vue for my webpage, then I use eventBus to pass data component to other components.

I want to know,

  1. passing data with eventBus between sibling component is a bad pattern.

  2. eventBus.$emit once, and eventBus.$on at multiple components.

I found some articles that you need to pass with props when parent - child situation.

Also, I cannot found about mutitle "on" situation.

here's sample architecture.

  • dashboard
    • component1
    • component2

dashboard contains component1 and 2

case no 1.

passing data component1 -> component2 to use eventBus is good pattern?

case no 2.

at dashboard, I emit eventBus.$emit('update', some data)

then,

at component 1,2 I listen event with eventBus.$on('update', (data) => ... )

this pattern is good pattern?


Solution

  • You can do everything with Vuex and that would be a cleaner solution, since in your storage you will be more aware of your data flow.

    In case 1 you can commit a mutation and then in all places needed watch for changes or better, just use computed values. EventBus is not bad pattern, but I think it's more suitable for big distributed projects, where you really want to propagate events, not just pass data updates.

    For case 2 you don't need anything but Vue. Just pass parameters and watch them in children components.