Bitrix Framework

BitrixVue 3 applications allows you to work with three levels of event-driven model:

1. Component-level events (standard Vue events)
2. Application-level events ($Bitrix.eventEmitter)
3. Site-level events (Global EventEmitter)

Let's overview all three types and define cases when need to use each.

1. Component-level events

   Vue application standard events: Vue user events. This level of events shall be used for interaction between component and its parent.

   Such approach is very convenient to use, when you need to throw an event up one level. But, if you need to throw event to several levels or to a neighbouring component at the same level – such task doesn't look so simple anymore. For this purpose, there is a special format: Application-level events.

2. Application-level events

   Application-level events can be useful, when you need to throw an event to several levels up or at the same level as your component. Such events won't be caught and processed by other Vue applications at this page.

   Within Vue 3 you cannot organize events at the app level. According to developer recommendation an external event-driven model must be used in the current version.

   In BitrixVue 3 we have introduced integration with our standard EventEmitter from Bitrix Framework. The variable $Bitrix.eventEmitter is an instance of EventEmitter class with specified namespace for current application. YOu can find extra details about the setup layout and view examples in the following article: Class for handling app-level events.

3. Site-level events

   When you need to interact with other system elements outside the current Vue application, you need to use global Event.EventEmitter from the Core.js library (extension main.core.events).

   Such mechanism will be suitable for passing events between two different Vue applications within a single page or for interacting with other Bitrix Framework interfaces.

Event description in component (JSDoc)

Events from all three levels of event-driven model shall be described inside components. You can find mode details on how to do it in the article: Component property formatting and order.