Views: 408
Last Modified: 28.04.2022

Sometimes Vue applications require access to the launch context (managing script). Previously, such access was implemented via registration of global variable when initializating Vue application.

Before:

import {Vue} from 'ui.vue';

class TaskManager
{
	...
	attachTemplate()
	{
		const context = this;
		        
		this.vm = new Vue({
		    el: this.rootNode,
			beforeCreate() 
			{
				this.$bitrixApplication = context;
			},
			template: '<module-component/>'
		})
	}
	...
}

Now you need to use the class $Bitrix.Application:

import {BitrixVue} from 'ui.vue3';

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

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

This method is responsible for accessing the context:

this.$Bitrix.Application.get();

You can find more details on methods operation in the article: Class app link (context) forwarding.





Courses developed by Bitrix24