Views: 250
Last Modified: 28.04.2022

Use this approach if you must implement changes in an already existing interface instead of creating a new one. You can mutate any mutable BitrixVue components .

  Method BitrixVue.mutateComponent

Method for registering component mutations (customizations) without altering product's source code.

When called, registers a mutation to be applied to the component, when it's available:

BitrixVue.mutateComponent(source: string|BitrixVueComponent, mutations: object): boolean

Parameters:

Parameter Description
source Component BitrixVue string ID or component BitrixVue object.
mutations Object with parameters to be replaced in the original component. Corresponds to Vue component parameters. You can find mode details about mutations in the article Component mutation rules.

Result:

boolean:

  • true – if mutation is registered;
  • false – if a classic Vue component was passed to the method.

Note:

You can register mutation before and after registering an original component. However, it will be applied only after declaring a mutable component. Please note, if you have registered a mutation after inserting the component into a template, your mutation won't be applied in this application.

You cannot mutate a classic Vue component object, but you can clone it with required alterations - learn more in the article: Component cloning. In contrast to BitrixVue 2, component mutation in BitrixVue 3 no longer applies to clones of original.

Attention! We try to preserve backward compatibility for mutable components, however, it's recommended to check your mutations after product updates (to ensure that component continues to operate as you expected).

  Example

Mutate component by name, replace template with a new one (add a frame):

import {BitrixVue} from 'ui.vue3';

BitrixVue.mutateComponent('ui-digits', {
	template: `
		<div style="border: 1px solid red">
			#PARENT_TEMPLATE#
		</div>
	`
});

Mutate component by object, change a calculated property (extend the current list):

import {BitrixVue} from 'ui.vue3';
import {Digits} from 'ui.digits'

BitrixVue.mutateComponent(Digits, {
	computed: {
		digitsList() 
        {
			return [
                ...this.parentDigitsList,
				11, 12, 13, 14, 15
			]; 
        }
    }
});

By executing these two mutations one after another, you will see both the frame and new numbers. This example is reviewed in detail in the article: Component mutation rules.





Courses developed by Bitrix24