Matestack's Vue.js APIs [WIP]

Event Hub

Matestack offers an event hub, which can be used to communicate between components.

Emitting events

app/matestack/components/some_component.js
1
import Vue from "vue/dist/vue.esm";
2
import MatestackUiCore from "matestack-ui-core";
3
4
Vue.component('some-component', {
5
mixins: [MatestackUiCore.componentMixin],
6
data() {
7
return {}
8
},
9
mounted(){
10
MatestackUiCore.eventHub.$emit("some-event", { some: "optional data" })
11
}
12
})
Copied!
Use MatestackUiCore.eventHub.$emit(EVENT_NAME, OPTIONAL PAYLOAD)

Receiving events

app/matestack/components/some_component.js
1
import Vue from "vue/dist/vue.esm";
2
import MatestackUiCore from "matestack-ui-core";
3
4
Vue.component('some-component', {
5
mixins: [MatestackUiCore.componentMixin],
6
data() {
7
return {}
8
},
9
methods: {
10
reactToEvent(payload){
11
console.log(payload)
12
}
13
},
14
mounted(){
15
MatestackUiCore.eventHub.$on("some-event", this.reactToEvent)
16
},
17
beforeDestroy(){
18
MatestackUiCore.eventHub.$off("some-event", this.reactToEvent)
19
}
20
})
Copied!
Make sure to cancel the event listener within the beforeDestroy hook!
Last modified 5mo ago