npm install @rocketbase/vue-eventing
You can configure this module by importing the "VueEventing" function and optionally passing in the features you want to enable.
Example:
import { VueEventing } from "@rocketbase/vue-eventing";
VueEventing({
// Enable $on, $off, $once instance methods, off by default
instanceMethods: true,
// Enable $emit hook to emulate Vue 2.x $emit behavior, off by default
emitIntegration: true,
});
There are two main ways of using this library, with the @Eventing
decorator or the MixEventing
mixin.
While the decorator works essentially the same way, the mixin also provides useful typing to the class.
import { Component, On, Vue } from "@rocketbase/vue-extra-decorators";
import { Eventing } from "@rocketbase/vue-eventing";
@Component({})
@Eventing
export default class MyComponent extends Vue {
@On("some-event")
private onSomeEvent(...args: unknown[]): void {
console.log(...args);
}
private mounted() {
this.$emit("some-event", "foo", "bar", 123);
}
}
import { Component, On, Vue } from "@rocketbase/vue-extra-decorators";
import { MixEventing } from "@rocketbase/vue-eventing";
@Component({})
export default class MyComponent extends MixEventing(Vue) {
@On("some-event")
private onSomeEvent(...args: unknown[]): void {
console.log(...args);
}
private mounted() {
this.$emit("some-event", "foo", "bar", 123);
}
}