Views: 2166
Last Modified: 28.04.2022

BitrixVue supports two local types of components:

  • First type: classic Vue components based on plain objects without special processing.
  • Second type: mutable BitrixVue components. This type was created for affiliated third-party developers could customize components, supplied within Bitrix Framework, without the need to modify product source code.

Before selecting a suitable type, you need to determine whether you want to provide access to mutation (component editing) to other developers. If you don't want to - select the first type, if you do - select the second type.

  Classic Vue components

This is a standard component format as a standard object with parameters (learn more Vue 3 documentation: Components basics и Advanced components):

const Component = {
	...
};

Example:

import {BitrixVue} from 'ui.vue3';

const Component = {
	template: 'Hello, world!'
};

BitrixVue.createApp({
	components: {
		Component
	},
	template: `
        <Component/>
    `
}).mount('#application');

Component must adhere to the general formatting rules.

  Mutable BitrixVue components

Using the method BitrixVue.mutableComponent you can get an object for component local registration. Such components can be mutated by affiliated developers:

BitrixVue.mutableComponent(name: string, definition: object): BitrixVueComponentProxy

Parameters:

  • name - unique string component identifier, necessary for applying mutation by name (for example: ui-name-local);
  • definition - object with component parameters, learn more in Vue documentation (Options Api section).

Result:

BitrixVueComponentProxy – specialized BitrixVue component object to be inserted to Vue application. Allows applying mutations via link to object or by identifier.

Note:

The result is the Proxy object for BitrixVue component. This object can be inserted into property components inside any Vue component (including the root component) and use it in the template. Upon inserting of such component, Vue get either the definition object, or definition object with applied mutations, if such were registered until the template rendering.

Such component can be mutated (customized) or cloned.

Component must adhere to general rules for naming and formatting.

Example:

import {BitrixVue} from 'ui.vue3';

const Component = BitrixVue.mutableComponent('module-component', {
	template: 'Hello, world!'
});

BitrixVue.createApp({
	components: {
		Component
	},
	template: `
        <Component/>
    `
}).mount('#application');

Handling of components is reviewed in detail in the lesson Example of component as JS extension.





Courses developed by Bitrix24