Просмотров: 2751 (Статистика ведётся с 06.02.2017)

Анна Кокина

Сложность урока:

4 уровень - сложно, требуется сосредоточится, внимание деталям и точному следованию инструкции.

1

2

3

4

5

Недоступно в редакциях:

Ограничений нет

Глобальные компоненты располагаются в модуле ui в директории /modules/ui/install/js/ui/vue/components/. Компоненты, относящиеся к вашему модулю, вы можете располагать в директории /modules/<module>/install/js/<some_path>.

Все компоненты должны быть в виде расширений СoreJS в новом формате. В общих чертах ваш компонент будет выглядеть следующим образом:

/some-component/config.php
/some-component/lang/<...>/config.php
/some-component/module-name.extension-path.some-component.js

Cодержимое файла config.php:

<?
if (!defined("B_PROLOG_INCLUDED") || B_PROLOG_INCLUDED !== true)
{
   die();
}

return array(
   'js' => Array(
      '/bitrix/js/module-name/extension-path/some-component/module-name.extension-path.some-component.js',
   ),
   'rel' => array('ui.vue'),
   'skip_core' => true,
   'bundle_js' => 'your-bundle-name'
);

В зависимостях обязательно должен быть ui.vue. Если не используются библиотеки CoreJS внутри директивы, нужно указать ключ 'skip_core' => true

Содержимое файла module-name.extension-path.some-component.js:

(function(window)
{
   "use strict";

   /**
    * Module name	
    * Some Component Vue component
    *
    * @package bitrix
    * @subpackage moduleName
    * @copyright 2001-2019 Bitrix
    */
   
   const BX = window.BX;

   BX.Vue.component('bx-moduleName-someComponent',
   {
		/**
		 * @emits 'sendEvent`' {text: string}
		 */
	
		/**
		 * @listens 'onModuleNameSomeComponentEvent' {} (global)
		 */
		
		props: 
		{
			...,
			doSomethingEventName: { default: 'onModuleNameSomeComponentDoSomethingEvent' },
		},
		
		data()
		{
			return {
				...
			}
		},
		
		created()
		{
			BX.Vue.event.$on('onModuleNameSomeComponentEvent', this.onDoSomething);
			...
		},
		
		beforeDestroy()
		{
			BX.Vue.event.$off('onModuleNameSomeComponentEvent', this.onDoSomething);
			...
		},
		
		methods: 
		{
			onDoSomething(event) 
			{
				...
			}
		},
		
		...,
		
		computed: 
		{
			...,
			
			localize(state)
			{
				return BX.Vue.getFilteredPhrases('BX_MODULE-NAME_COMPONENT-PREFIX_');
			}
		},
		
		template: `
			<div class="some-component">
			</div>
		`
		
   });

})(window);

Все параметры компонентов описаны в документации Vue Основы компонентов Основы компонентов

Компоненты — это переиспользуемые экземпляры Vue со своим именем. В примере выше это <button-counter>. Его можно использовать как пользовательский тег внутри корневого экземпляра Vue, созданного с помощью new Vue.

Подробнее... и Продвинутые компоненты. Регистрация компонентов

При регистрации компонента у него всегда будет имя. Именем компонента будет первый аргумент.

Имя, которое дается компоненту, может зависеть от того, где планируется его использовать. При использовании компонента непосредственно в DOM (в отличие от строковых шаблонов или однофайловых компонентов), настоятельно рекомендуем следовать правилам W3C для именования пользовательских тегов (все символы в нижнем регистре, должен содержаться дефис). Это позволит избежать конфликтов с текущими и будущими HTML-элементами.

Подробнее...

Ниже остановимся только на особенностях работы в рамках системы Bitrix Framework.

Имя компонента должно начинаться с префикса bx- для исключения пересечения с директивами внешних разработчиков, далее указываются название модуля и название компонента.

Компоненты VueJS написаны таким способом, чтобы при беглом взгляде можно было сразу понять, какие используются входные параметры (внешние переменные props), какие используются внутренние данные (внутренние переменные data). К сожалению, для компонентов Vue не предусмотрен описательный формат для событий, генерируемых компонентом во внешнюю среду (emits), и для событий, которые слушаются компонентом из внешней среды (listens). Однако в рамках экосистемы Битрикс нужно описывать их в формате комментариев JSDoc в начале компонента.

/**
 * @emits 'sendEvent`' {text: string}
 */

/**
 * @listens 'onModuleNameSomeComponentEvent' {} (global)
 */

Подробнее о событиях и слушателях, а также о правилах их оформления смотрите в уроке События и слушатели в компонентах. Компоненты в рамках Vue - автономные структуры, у которых логика и данные находятся в предсказуемых местах. Зачастую даже при беглом взгляде можно сразу понять, какие используются входные параметры (props) и какие используются внутренние переменные (data).

Чтобы компоненты могли взаимодействовать друг с другом, в Vue существует возможность распространять события с помощью .$emit('eventName', eventParams) и подписываться (слушать) через .$on('eventName', this.eventCallback);.

Подробнее...

Все js-компоненты Битрикс, как их php-версии, должны иметь поддержку локализаций. Для этого необходимо подготовить вычисляемое свойство Вычисляемые свойства и слежение

Встраиваемые в шаблоны выражения удобны, но могут предназначаться только для простых операций. При усложнении логики их труднее поддерживать.

На помощь здесь приходят вычисляемые свойства.

Подробнее... computed.localize:

computed: 
	{
		localize(state)
		{
			return BX.Vue.getFilteredPhrases('BX_MODULE-NAME_COMPONENT-PREFIX_');
		}
	}

Так как все вычисляемые свойства попадают в шаблон и по умолчанию реактивны, Подробно о реактивности

Одна из наиболее примечательных возможностей Vue — это ненавязчивая реактивность. Модели представляют собой простые JavaScript-объекты. По мере их изменения обновляется и представление данных, благодаря чему управление состоянием приложения становится простым и очевидным. Тем не менее, у механизма реактивности есть ряд особенностей, знакомство с которыми позволит избежать распространённых ошибок. В этом разделе руководства мы подробно рассмотрим низкоуровневую реализацию системы реактивности Vue.

Подробнее... необходимо использовать функцию BX.Vue.getFilteredPhrases для добавления в шаблонизатор только нужных фраз и отключения для них реактивности (отслеживания изменений). Подробнее о локализации можно прочитать в соответствующем уроке. Все js-компоненты Битрикс, как их php-версии, должны иметь поддержку локализаций. Для этого вам необходимо подготовить вычисляемое свойство computed.localize.

Подробнее...

Компоненты Битрикс, в отличие от обычных компонентов Vue, поддерживают возможность клонирования разработчиками и модификации (мутации) партнерами, поэтому при регистрации компонентов необходимо указывать не Vue.component(...), а метод BX.Vue.component(...) (все параметры полностью совпадают с синтаксисом Vue).