Дата последнего изменения: 25.01.2019
Компоненты (общая информация) |
Подробнее о всех возможностях компонентов вы можете прочитать в документации Vue
Основы компонентов
Основы компонентов
Компоненты — это переиспользуемые экземпляры Vue со своим именем. В примере выше это button-counter
. Его можно использовать как пользовательский тег внутри корневого экземпляра Vue, созданного с помощью new Vue
.
Подробнее...
и
Продвинутые компоненты.
Регистрация компонентов
При регистрации компонента у него всегда будет имя. Именем компонента будет первый аргумент.
Имя, которое даётся компоненту, может зависеть от того, где планируется его использовать. При использовании компонента непосредственно в DOM (в отличие от строковых шаблонов или однофайловых компонентов), настоятельно рекомендуем следовать правилам W3C для именования пользовательских тегов (все символы в нижнем регистре, должен содержаться дефис). Это позволит избежать конфликтов с текущими и будущими HTML-элементами.
Подробнее...
Определим новый компонент, назовем его bx-button-counter.
BX.Vue.component('bx-button-counter', { data() { return { count: 0 } }, template: '<button @click="count++">Счётчик кликов — {{ count }}</button>' })
Его можно использовать как пользовательский тег внутри корневого экземпляра Vue, созданного с помощью BX.Vue.create({...})
или в шаблоне другого компонента.
<div id="vue-application"></div> <script> BX.Vue.component('bx-button-counter', { data() { return { count: 0 } }, template: '<button @click="count++">Счётчик кликов — {{ count }}</button>' }); BX.Vue.create({ el: '#vue-application', template: '<bx-button-counter/>' }); </script>
Так как компоненты Vue.js - это переиспользуемые экземпляры Vue, то они принимают те же опции, что и BX.Vue.create
, такие как data
, computed
, watch
, methods
, хуки жизненного цикла
.
Единственными исключениями будут несколько специфичных для корневого экземпляра опций, например, el.
Компоненты можно переиспользовать неограниченное количество раз:
<div id="vue-application"></div> <script> BX.Vue.component('bx-button-counter', { data() { return { count: 0 } }, template: '<button @click="count++">Счётчик кликов — {{ count }}</button>' }); BX.Vue.create({ el: '#vue-application', template: ` <div class="buttons"> <bx-button-counter/> <bx-button-counter/> <bx-button-counter/> </div> ` }); </script>
Приложение организуется в виде дерева вложенных компонентов:
Например, могут быть компоненты для заголовка, боковой панели, зоны контента, каждый из которых может содержать другие компоненты для навигационных ссылок, постов блога и т.д.
Для использования этих компонентов в шаблоне они должны быть зарегистрированы, чтобы Vue узнал о них. Есть два типа регистрации компонентов: глобальная и локальная. В рамках экосистемы Битрикс используется только глобальная регистрация, подробнее о создании и причинах глобальной регистрации описано в уроке
Создание компонентов.
Создание компонентов
Глобальные компоненты располагаются в модуле ui в директории /modules/ui/install/js/ui/vue/components/
. Компоненты, относящиеся к вашему модулю, вы можете располагать в директории /modules/<module>/install/js/<some_path>
.
Подробнее...