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.





Courses developed by Bitrix24