Компоненты -- это многоразовые объекты в Vue со своими данными и методами. Хорошей практикой является разбиение приложения на компоненты.

После создания компоненты можно использовать как обычные HTML-тэги.

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

Компоненты можно именовать как угодно. Хорошей практикой является написание имени в нижнем регистре и наличие префикса перед именем компонента. При использовании WebPack также возможно использовать регистро-зависимые имена компонентов. Кроме этого, Vue автоматически конвертирует имена, написанные в camelCase в имена с дефисами (можно использовать и те, и другие имена):

• myComponent -> my-component
• myDateTimePicker -> my-date-time-picker

Глобальная или локальная регистрация:

==========================

При глобальной регистрации компонент станет доступен во всех других экземплярах и компонентах Vue, используемых в рамках данной веб-страницы.

// регистрация
Vue.component('my-component', {
template: '<div>Пользовательский компонент!</div>'
})

// создание корневого экземпляра
new Vue({
el: '#example'
})

// использование

<div id="example">
<my-component></my-component>
</div>

При локальной регистрации компонент можно использовать только в области видимости конкретного экземпляра или компонента.

var Child = {
template: '<div>Пользовательский компонент!</div>'
}

new Vue({
// ...
components: {
// <my-component> будет доступен только в шаблоне родителя
'my-component': Child
}
})

Опция data должна быть функцией:

=======================

Компоненты поддерживают те же опции и методы, что и экземпляры Vue. Опция data является единственным исключением. В компонентах она должна быть представлена функцией. Это связано с тем, что в JS объекты передаются по ссылке, таким образом несколько одинаковых компонентов имели бы общие данные, хотя каждый из них должен быть независимым. Именно поэтому data является функцией, которая при создании компонента порождает новый независимый объект в памяти.

Пример:

Vue.component('my-component', {
template: '<span>{{ message }}</span>',
data: function() {

return {
message: 'привет!'

}
}
})