Bitrix Framework

  Method BitrixVue.cloneComponent

Sometimes the component fits into the project, except for a single action (for example, you need to insert a selected smiley as [smile], but not as :smile:). Or, a default component template is not suitable for your project, but you are okay with the rest of component parts (for example, database data retrieval, actions, events).

In this case, you can clone an existing component and update any required elements inside it, without touching the rest of features.

In contrast to Component mutation, you can clone any component, whether BitrixVue component or classic Vue component. Find more details about mutations (and their types) in the article Component mutation rules.

The method BitrixVue.cloneComponent allows cloning a local component and to mutate (customize) without changing the original component:

BitrixVue.cloneComponent(source: string|object|BitrixVueComponent, mutations: object): BitrixVueComponentProxy

Parameters:

Result:

BitrixVueComponentProxy is a specialized BitrixVue component object to be inserted into Vue application. Allows to apply mutations using object links.

Note:

Result of this function will be Proxy object for BitrixVue component. This object can be inserted into the property components in any Vue component (including the root component) and used in the template. Upon inserting such component, Vue gets a definition object, or a definition object with applied mutations, if such were registered before template rendering.

If you are cloning component by name, original component must be loaded before the a clone is inserted into component template.

In contrast to BitrixVue 2, in BitrixVue 3 components are cloned using not the final component version (original + mutations), but always using original.

  Examples

import {BitrixVue} from 'ui.vue3';
import {Local} from 'ui.components.local';

const LocalByObject = BitrixVue.cloneComponent(Local, {
	template: `
		Clone BitrixVue component by Object. Previous template: #PARENT_TEMPLATE#
	`
});

import {BitrixVue} from 'ui.vue3';

const LocalByName = BitrixVue.cloneComponent('ui-local', {
	template: `
		Clone BitrixVue component by Name. Previous template: #PARENT_TEMPLATE#
	`
});

import {BitrixVue} from 'ui.vue3';
const LocalVue = {
	template: `Base local component.`
}

const LocalVueByObject = BitrixVue.cloneComponent(LocalVue, {
	template: `
		Clone Vue component by Object. Previous template: #PARENT_TEMPLATE#
	`
});