Bitrix Framework

  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');