Основы компонентов Базовый пример

Создание компонентов в Vuejs

Основы компонентов Базовый пример

Вот пример компонента Vue:
// Определяем новый компонент, названный button-counter
Vue.component('button-counter', {
data: function () {
return {
count: 0
}
},
template: 'Счётчик кликов — {{ count }}'
})
Компоненты — это переиспользуемые экземпляры Vue со своим именем. В примере выше это . Его можно использовать как пользовательский тег внутри корневого экземпляра Vue, созданного с помощью new Vue:

new Vue({ el: '#components-demo' })
Так как компоненты это переиспользуемые экземпляры Vue, то они принимают те же опции что и new Vue, такие как data, computed, watch, methods, хуки жизненного цикла. Единственными исключениями будут несколько специфичных для корневого экземпляра опций, например el.

Переиспользование компонентов

Компоненты можно переиспользовать столько раз, сколько захотите:

Обратите внимание, при нажатиях на кнопки, каждая изменяет свой собственный, отдельный count. Это потому, что каждый раз когда вы используете компонент будет создан его новый экземпляр.

Свойство data должно быть функцией

При определении компонента  вы могли заметить, что data не была представлена в виде объекта, например так:
data: {
count: 0
}
Вместо этого свойство data у компонентов должно быть функцией, чтобы каждый экземпляр компонента управлял собственной независимой копией возвращаемого объекта данных:
data: function () {
return {
count: 0
}
}
Если бы не было этого правила, нажатие на одну кнопку повлияло бы на данные всех других экземпляров, как например тут: