Bitrix Framework

  Component formatting and property order

Options for component/instance must be consistently ordered

The Vue developer community has a current special order for blocks. We recommend to strictly follow it in the components for BitrixVue 3 as well.

Indicating the employed events

Vue 3 components are written in such a manner that you can clearly understand at the superficial glance, which input parameters are used (props), what internal data (data) and which events are emitted (emits).

If your component creates or stands by for events from EventEmitter, you must describe them at the start of component: this will significantly help other developers.

  Events in components (emits)

When your component creates a component-dedicated event (local event), you need to describe it at the component's start. Other developers can identify necessary events, without studying the code of Your component.

Event description for the component this.$emit('sendMessage', {text: 'Some text'}):

{
    ...
    emits: ['sendMessage']
    ...
}

  Listeners in components (BitrixEvents)

You need to describe it at the start of component if it listens to events at the website or application level. Other developers will be able to learn that component can react to external events without studying your code in detail.

Description is prepared in a comment format; event name must start with the module name, followed by component and action name. Such format will fully exclude conflicts between names of various components.

/**
 * @bitrixEvents 'ui:textarea:insertText' {text: string} (application)
 */

You can generate subscription to such events in the component method created and not forget to unsubscribe from event in the method beforeDestroy.

You can learn more about event-driven model in the article under the same name.