[Suggestion] Vue 2.0 - Replacement for $broadcast and $dispatch

[nirazul]

First of all, thanks for all the great work so far. vuejs is by a great measure the most enjoyable frontend framework I've tried so far.

As for some of the changes that are scheduled for v2, I'd like to know if a replacement with a plugin is possible.
One thing i liked about events is the events scope where all listeners are gathered. With your suggestion for vue2 with a global event-bus, I don't see how I can replace following code:

my comp = {
    events: {
        'overlay:close': function() {
            /* handle event */
        }
    }
}

I don't miss the actual hierarchy of $broadcast and $dispatch within the component tree, but I'd really love to keep a global event bus that works together with the events object. If this is possible through a plugin, that would fit my needs. Maybe it could be possible to make $emit emit globally with an additional attribute?

[blake-newman]

Did you see this? https://github.com/vuejs/vue/wiki/2.0-features#how-to-deal-with-deprecation-of-dispatch-and-broadcast

[nirazul]

Yep, I've seen this. My concern is, how to implement the global event bus with events registered in the event object. I'm looking for a way to automate:

{
    ready: {
        bus.$on('id:selected', this['idSelected']);
    },
    methods: {
        'idSelected': function() {
            // ...
        }
    }
}

into:

{
    events: {
        'id-selected': function() {
            // ...
        }
    }
}

I know that this seems merely a convenience, but vue is all about convenience, simplicity and ease of use.

[indus]

@nirazul something like the following in one of the lifecycle hooks may work

for (var evt_id in this.options.events)
            bus.$on(evt_id, this.options.events[evt_id])

I haven´t looked close enough to the new API but you may be able to use it as a mixin

// ...
var auto_events = {
    created: function () {
        for (var evt_id in this.options.events)
            bus.$on(evt_id, this.options.events[evt_id])},
    destroyed: function () {
        for (var evt_id in this.options.events)
            bus.$off(evt_id)}
}

// ...

new Vue({
    // ...
    mixin: [auto_events],
    events: {
        'id-selected': function () {
            // ...
        }
    }
    // ...
})

[nirazul]

@indus
This sounds like a plan. I'll try it out when the first alpha of vue 2 is released 👍

[rpkilby]

This all sounds 👍 for application components where I control the bus that my components use. My concern here is 3rd party components. How do I listen to events emitted by an arbitrary component?

• Vue components are not instantiated by the user, but by Vue internally
• 3rd party components are not aware of the bus system that I may or may not be using.

[jsiebach]

2.0 recommends using Vuex to inject the bus into components where you need to use events, but this seems like overkill for small projects. I liked that Vue didn't require using Vuex or Router or even Http unless it was needed. Also as @rpkilby states, there is no longer a universal system for 3rd party components, which will hurt the community as a whole. Thinking of how important they are in jQuery, I think Vue needs an equivalent.

[yyx990803]

@rpkilby 3rd party components still have the ability to directly $emit on themselves, they just no longer have the ability to dispatch events that propagates. This essentially ensures that a 3rd party component can only cause side effects in its direct parent, which I believe is a good thing. An isolated component being able to dispatch a event that causes side effects in its unknown parent tree sounds like a recipe for trouble to me.

[rpkilby]

An isolated component being able to dispatch a event that causes side effects in its unknown parent tree sounds like a recipe for trouble to me.

@yyx990803, totally agree. My concern is how the direct parent of the 3rd party component will be able to listen for those event. I would not want select2 to fire events on a global bus. I would (most likely*) want only the parent to get those events. How do events $emitted on yourself communicate with the parent component? I thought $emit was isolated to the component.

*There may be cases where I'd want the event to propagate beyond the direct parent. Either way, that's an application detail that the parent component would determine.

[jsiebach]

@rpkilby I guess using v-ref on the component and then listening with this.$refs.component.$on('foo',(data) => {}). If the $emitted event had the relevant data sent along with it, or the affected data was .sync'd to the parent, you could handle it accordingly. With .bind() or with an => function you would be executing the result in the parent scope.

[yyx990803]

@rpkilby with v-on:

<child @some-event="handleIt"></child>

[kaorun343]

@yyx990803 Is this correct?

var Child = {
  methods: {
    method: function() {
      var arg = ""
      this.$emit('some-event', arg)
    }
  }
}

[rpkilby]

with v-on

Holy crap I had no idea that you could do this the entire time. Where is the 🤦 emoji.

[azamat-sharapov]

@rpkilby subscribe to vuejs/vuejs.org repo commits 😉

[paulpflug]

From my viewpoint of standalone component developer I would need something like

• Suggestion: Plugin directive for slot #2507 (v-on working on slot) and
• [feature] v-emit / v-call - the missing link #2648 (directly call function on child - should also work on slot)

to fully replace the communication of two nested, depending components. #2648 was dismissed mainly because of $dispatch and $broadcast - please reconsider.

Use-cases:
vue-card
vue-collapsible
vue-comps-scrollspy