MyTetra Share
Делитесь знаниями!
Компоненты в Vue
24.02.2018
13:46
Автор: br0ke
Текстовые метки: javascript, js, vue, vuejs, vue.js, component, components, компонент, компоненты
Раздел: Информационные технологии - JavaScript - Vue

Компоненты -- это многоразовые объекты в 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: 'привет!'

}
}
})



Так же в этом разделе:
 
MyTetra Share v.0.52
Яндекс индекс цитирования