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!

Custom Reactivity implemented in Vue.js - Previous

Third party Vue.js components [WIP]

Next - Custom Reactivity implemented in Vue.js

Matestack's Vuex API [WIP]

Last modified 4mo ago

Copy link

Edit on GitHub

Contents

Event Hub

Emitting events

Receiving events