Views: 3040
Last Modified: 11.05.2022
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.
Methods $Bitrix.Application
|
$Bitrix.Application.set | Method sets link to application (execution context). |
$Bitrix.Application.get | Method gets link to application (execution context). |
|
$Bitrix.Application.set
Method saves link to application (execution context).
this.$Bitrix.Application.set(instance: Object): void
Parameters:
Parameter | Description
|
instance | Link to application object (for subsequent access). |
|
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.