Component.Event

Component IO comes with a built-in message bus you can use for communication between components or within your application. It is based on the event system available to Vue.js components.

$on( event, callback )

$once( event, callback )

$off( event, callback )

$emit( event, data )

Example

We’ve created a component with key mldrn that has the following JavaScript code:

Component.Event.$on('updateComponent', function(data) {
component.data.title = data.title
component.data.content = data.content
})

This code was added via the dashboard code editor, so now the component will respond to the updateComponent event by updating its title and content. Note that there is nothing special about the name updateComponent – the event can be named anything.

Now in our application code we can call Component.Event.$emit('updateComponent', ...) and our component will respond accordingly. Below we have a button set to run the following when it is clicked:

Component.Event.$emit('updateComponent', {
title: 'New title',
content: 'New content at ' + new Date().toLocaleTimeString() + '<br><br>'
})

Thus clicking the button will cause the updateComponent event to fire, which is then picked up by our component, and the title and content are updated:

With this approach, you can send events to any component from your application code or from other components.