Views: 3168
Last Modified: 28.04.2022
Class $Bitrix.eventEmitter
This class is created to organize events at the Vue application level.
You can find more details about event-driven model in this separate article.
Methods $Bitrix.eventEmitter
The variable $Bitrix.eventEmitter is an instance of class EventEmitter with specified namespace for current application.
Only key methods are described within this article:
- Subscription to an event
this.$Bitrix.eventEmitter.subscribe(event: any, listener: (event: BaseEvent) => void): EventEmitter
Adds handler to an indicated event. The first parameter passes object type BaseEvent
as the first parameter from the extensionmain.core.events
to the handler.
- One-time subscription to event
this.$Bitrix.eventEmitter.subscribeOnce(event: any, listener: (event: BaseEvent) => void): EventEmitter
Adds a handler of specified event, called only once. Passes the object type BaseEvent
from extension main.core.events
as the first parameter to the event handler.
- Unsubscription from event
this.$Bitrix.eventEmitter.unsubscribe(event: any, listener: Function) => void): EventEmitter
Deletes event handler, installed previously.
- Event publication
this.$Bitrix.eventEmitter.emit(eventName: any, event?: BaseEvent | {[key: string]: any}): EventEmitter
Sends event with specified event code.
We recommend to use name of event in the following format: module name
, then component name
and action name
. Such format fully excludes conflict of names between different components.
Example: ui:textarea:insertText
Example
Let's overview example of interaction at the application level. Components are located at the same level and interact with each other.
Access to functions inside the component are performed in the same manner as to any other variable – via this.
. There are, however, nuances of use in the hook beforeCreate. You can find more details in the chapter description.
import {BitrixVue} from 'ui.vue3';
import {BaseEvent} from "main.core.events";
const ComponentRecipient = {
/**
* @bitrixEvents 'local:recipient:alert' {text: string} (application)
*/
data() {
return {
alertText: 'Wait text...'
}
},
mounted()
{
this.$Bitrix.eventEmitter.subscribe('local:recipient:alert', this.onAlert);
},
beforeUnmount()
{
this.$Bitrix.eventEmitter.unsubscribe('local:recipient:alert', this.onAlert);
},
methods:
{
onAlert(event)
{
const {text} = event.getData();
this.alertText = text;
}
},
template: `
{{alertText}}
`
};
const ComponentSender = {
methods: {
sendText1()
{
this.$Bitrix.eventEmitter.emit('local:recipient:alert', {text: 'Text from button number 1'});
},
sendText2()
{
this.$Bitrix.eventEmitter.emit('local:recipient:alert', {text: 'Text from button number 2'});
}
},
template: `
<button @click="sendText1">Text 1</button>
<button @click="sendText2">Text 2</button>
`
};
BitrixVue.createApp({
components: {
ComponentRecipient,
ComponentSender
},
template: `
Component 1: <ComponentSender/> <br/>
Component 2: <ComponentRecipient/>
`
}).mount('#application');
Note:
$Bitrix.eventEmitter is not a replacement to standard events, but one of the options for additional interaction. Find more details in the article:
Event-driven model.