Bitrix Framework

  Class $Bitrix.Application

This class allows to forward an application link (execution context) and when app (controller) methods from the component of any nesting level.

You can also use an event-driven model. You can find more details in the article: Event-driven model.

Access to functions inside the component is performed in the same manner as in any other variable – via this.. There are, however, nuances of use in the hook beforeCreate that are detailed in the chapter description.

$Bitrix.Application.set

Method saves link to application (execution context).

this.$Bitrix.Application.set(instance: Object): void

Parameters:

Example:

import {BitrixVue} from 'ui.vue3';

class TaskManager
{
	...
	attachTemplate(): void
	{
		const context = this;

		this.#application = BitrixVue.createApp({
			name: 'TaskManager',
			components: {
				TaskManger
			},
			beforeCreate(): void
			{
				this.$bitrix.Application.set(context);
			},
			template: '<TaskManger/>'
		});
		this.#application.mount(this.rootNode)
	}
	...
}

$Bitrix.Application.get

Method gets link to application (execution context).

this.$Bitrix.Application.get(): Object

Result:

Object – link to application object, must be set when creating Vue application.

Example:

const Component = {
	...
	methods: 
	{
		close() 
		{
			this.$Bitrix.Application.get().closeWindow();
		}
	},
	// language=Vue
	template: `
		<div class="component">
		    ...
			<button @click="save">Save</button>
			<button @click="close">Close</button>
		</div>
	`
});

Other example with the context forwarding is overviewed in detail in the article: Example of completed Vue application.