Bitrix Framework

  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:

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.

  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.