vue-bubbler

A Vue plugin that enables bubbling of custom events vue-bubbler - npm

Usage

1. Install package

npm install vue-bubbler

2. Vue.use it

import Vue from 'vue';
import VueBubbler from 'vue-bubbler';
 
Vue.use(VueBubbler);

3. Emit custom events with vm.$bubble instead of vm.$emit

{
    // ...
    methods: {
        foo() {
            // You can add extra arguments, of course
            this.$bubble('foo-called');
        }
    }
}

Options

Vue.use(VueBubbler, {
    shouldPropagate(child, parent, event, args) {
        // You should return true if you want components to propagate custom events.
        // By default this is undefined, all events will be propagated.
        return true;
    },
 
    // When true, vue-bubbler will NOT add new "$bubble" instance method,
    // instead overrides existing "$on" instance method.
    override: false,
});

Sealing Extension

vue-bubbler includes official extension vue-bubbler/sealing.

This adds vm.$sealed custom property, which decides whether the component propagates custom events by $bubble method.

Usage

In bootstrap:

import Vue from 'vue';
import VueBubbler from 'vue-bubbler';
import { preventSealedComponents } from 'vue-bubbler/sealing';
 
Vue.use(VueBubbler, {
    shouldPropagate: preventSealedComponents,
});

In component:

import Vue from 'vue';
import { sealed } from 'vue-bubbler/sealing';
 
Vue.extend({
    // Now this component prevent propagation with $bubble.
    mixins: [sealed(true)],
    // ...
});

License

The MIT License.