Создание компонентов |
Глобальные компоненты располагаются в модуле 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).