Views: 606
Last Modified: 28.04.2022

  What to remember

Before creating a component you need to decide, which component do you require: classic or mutable.

If a component is created for internal objectives and you are not ready to support backward compatibility – its a classic Vue component There are two local components supported by BitrixVue:

First type are classic Vue components based on simple objects without special processing.

Second type are BitrixVue mutable components. This type is created for affiliated third-party developers. They can customize components supplied within Bitrix Framework, without necessity to modify product's source code.

Learn more...
. When you develop a component that can be changed by a third party – its a mutable BitrixVue component There are two local components supported by BitrixVue:

First type are classic Vue components based on simple objects without special processing.

Second type are BitrixVue mutable components. This type is created for affiliated third-party developers. They can customize components supplied within Bitrix Framework, without necessity to modify product's source code.

Learn more...
.

You must create components as СoreJS extensions in new format.

Do not forget this

  • Naming

    There are several rules for naming and export. For more details, please read the article: Component naming and import.

  • Component properties

    Component properties are structured and overviewed in detail in the following article: Generating and sorting component properties.

  • Localization

    BitrixVue 3 components can handle with localizations and this aspect is overviewed in detail in the article: Handing localization.

  • Event-driven model

    There are several types of events. You can find how to select a suitable event in this article: Event-driven model.

  • Handling $Bitrix global variable functions

    In addition to localizations and event-drive model, there are several additional classes that help to better reveal interaction with Bitrix Framework. You can find more in this article: Interaction with Bitrix Framework.

  • Local component file content

    Note: Naming variable for export doesn't contain the module - only the component name in PascalCase.

    /**
    * Some Vue3 сomponent
    *
    * @package bitrix
    * @subpackage module
    * @copyright 2001-2022 Bitrix
    */
    
    import {BitrixVue} from 'ui.vue3';
    
    export const Component = {
    	
    	/**
    	 * @bitrixEvents 'module:component:eventName' {} (global)
    	 */
    
    	emits: ['sendEvent'],
    
    	props:
        {
            ...
        },
    
    	data()
    	{
    		return {
    			...
    		}
    	},
    
    	computed:
        {
            ...
        },
    
    	created()
    	{
    		this.$Bitrix.eventEmitter.subscribe('module:component:eventName', this.onDoSomething);
    	    ...
    	},
    
    	beforeDestroy()
    	{
    		this.$Bitrix.eventEmitter.unsubscribe('module:component:eventName', this.onDoSomething);
    	    ...
    	},
    	methods:
    		{
    			onDoSomething(event)
    			{
    			    ...
    			}
    		},
    	// language=Vue
    	template: `
            ...
            {{$Bitrix.Loc.getMessage('MODULE_PHRASE_CODE_1')}}
    		...
    	`
    };
    

  • File content for mutable BitrixVue component

    Mutable component contents fully repeat the abovementioned classic Vue component. The only difference is the registration method.

    /**
    * Some BitrixVue3 component
    *
    * @package bitrix
    * @subpackage ui
    * @copyright 2001-2021 Bitrix
    */
    
    import {BitrixVue} from 'ui.vue3';
    
    export const Component = BitrixVue.component('module-component', {
    	...
    });
    

  Example

We have prepared several example of component handling:

  • example of classic Vue component;
  • example of BitrixVue component;
  • example of lazy-loading.

Perform the following steps to launch an app demo:

  1. Download the demo (utf8);
  2. Unpack the archive at the URL address /<installation location>/local/js/local/;
  3. Create public page and connect the extension:

    <?
    require($_SERVER["DOCUMENT_ROOT"]."/bitrix/header.php");
    ?>
    
    <?
    \Bitrix\Main\UI\Extension::load("local.demo.application");
    ?>
    
    <div id="application"></div>
    
    <script type="text/javascript">
    	const application = new BX.DemoApplication('#application');
    	application.run();
    </script>
    
    <?require($_SERVER["DOCUMENT_ROOT"]."/bitrix/footer.php");?>
    

  4. Open this page in browser to view the result:

If you want to edit the component and add your own custom logic, do not forget to launch the transpiler:

  1. Open the terminal;
  2. To to the folder for local extensions at cd /<installation path>/local/js/;
  3. Launch transpiler in changes track mode bitrix build -w to see the following text upon launch:

     ✔ 11:19:44 Build extension local.demo.application  js: 2 KB, css: 170 B
     ✔ 11:19:44 Build extension local.demo.components.async  js: 312 B
     ✔ 11:19:44 Build extension local.demo.components.bitrixvue  js: 646 B
     ✔ 11:19:44 Build extension local.demo.components.vue  js: 546 B
    

  4. Update the page: the implemented modifications will become visible;
  5. In case of new updates, just repeat the item 4.




Courses developed by Bitrix24