Matestack's Vue.js APIs

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 MatestackUiVueJs from "matestack-ui-vuejs";
2
​
3
const someComponent = {
4
  mixins: [MatestackUiVueJs.componentMixin],
5
  template: MatestackUiVueJs.componentHelpers.inlineTemplate,
6
  data() {
7
    return {}
8
  },
9
  mounted(){
10
    MatestackUiVueJs.eventHub.$emit("some-event", { some: "optional data" })
11
  }
12
}
13
export default someComponent
Copied!
Use MatestackUiVueJs.eventHub.$emit(EVENT_NAME, OPTIONAL PAYLOAD)
Receiving events
app/matestack/components/some_component.js
1
import MatestackUiVueJs from "matestack-ui-vuejs";
2
​
3
const someComponent =  {
4
  mixins: [MatestackUiVueJs.componentMixin],
5
  template: MatestackUiVueJs.componentHelpers.inlineTemplate,
6
  data() {
7
    return {}
8
  },
9
  methods: {
10
    reactToEvent(payload){
11
      console.log(payload)
12
    }
13
  },
14
  mounted(){
15
    MatestackUiVueJs.eventHub.$on("some-event", this.reactToEvent)
16
  },
17
  beforeUnmount(){
18
    MatestackUiVueJs.eventHub.$off("some-event", this.reactToEvent)
19
  }
20
}
21
export default someComponent
Copied!
Make sure to cancel the event listener within the beforeUnmount hook!
General Vue.js API
As we're pretty much implementing pure Vue.js components, you can refer to the Vue.js guides in order to learn more about Vue.js component usage.
Please note the following differences from the original Vue.js API:
component $refs
use this.getRefs() instead of this.$refs
use matestack_ui_vuejs_ref() when applying refs to your componen template:
1
def response
2
    # ...
3
    div ref: "some-ref" # <-- not picked up by this.getRefs()
4
    # ...
5
    div "matestack-ui-vuejs-ref": matestack_ui_vuejs_ref('some-ref')
6
end
Copied!
component $el
use this.getElement() instead of this.$el in order to get the root element defined in your response method
component template/root element
use this.getTemplateElement() in order to get the template element wrapping the root element defined in your response method

Custom Reactivity - Previous

Custom Vue.js Components

Next - Custom Reactivity

Third party Vue.js Components

Last modified 3mo ago

Copy link

Contents