Make Vue events bubble

bubble.md

Make Vue events bubble

Vue events don't bubble the component tree on their own. However when writing wrapper components this can be the desired behaviour.

This code registers a global bubble directive which allows to re-emit all given events:

Let's say we want to bubble events start, accelerate and brake of our component Car.

Without any help, we'd roughly have to do this:

<Car
  @start="(...args) => $emit('start', ...args)"
  @accelerate="(...args) => $emit('accelerate', ...args)"
  @brake="(...args) => $emit('brake', ...args)"
  />

However with this directive, we can just do the following:

<Car v-bubble.start.accelerate.brake />

That's it! :)

vue-bubble.js

Vue.directive('bubble', (el, binding, vnode) => {
  Object.keys(binding.modifiers).forEach(event => {
    // Bubble events of Vue components
    if (vnode.componentInstance) {
      vnode.componentInstance.$on(event, (...args) => {
        vnode.context.$emit(event, ...args)
      })

    // Bubble events of native DOM elements
    } else {
      el.addEventListener(event, payload => {
        vnode.context.$emit(event, payload)
      })
    }
  })
})