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

Организация компонентов

Обычно приложение организуется в виде дерева вложенных компонентов:

Например, у вас могут быть компоненты для заголовка, боковой панели, зоны контента, каждый из которых может содержать другие компоненты для навигационных ссылок, постов блога и т.д.
Чтобы использовать эти компоненты в шаблонах, они должны быть зарегистрированы, чтобы Vue узнал о них. Есть два типа регистрации компонентов: глобальная и локальная. До сих пор мы регистрировали компоненты только глобально, используя Vue.component:
Vue.component('my-component-name', {
// ... опции ...
})
Компоненты, зарегистрированные глобально, могут использоваться в шаблоне любого корневого экземпляра Vue (new Vue) созданного впоследствии — и даже внутри всех компонентов, расположенных в дереве компонентов этого экземпляра Vue.
На данный момент это всё, что вам нужно знать о регистрации компонентов. Но когда вы закончите изучение этой страницы и разберётесь со всей информацией представленной здесь — мы рекомендуем вернуться позднее и прочитать полное руководство по регистрации компонентов.

Передача данных в дочерние компоненты через входные параметры

Ранее мы создавали компонент для записи блога. Проблема в том, что этот компонент бесполезен, если не будет возможности передавать ему данные, такие как заголовок и содержимое записи блога, которую мы хотим показать. Вот для чего нужны входные параметры.
Входные параметры — это пользовательские атрибуты, которые вы можете установить на компоненте. Когда значение передаётся в атрибут входного параметра, оно становится свойством экземпляра компонента. Чтобы передать заголовок в компонент нашей записи блога, мы можем включить его в список входных параметров, которые принимает компонент, с помощью опции props:
Vue.component('blog-post', {
props: ['title'],
template: '

{{ title }}

'
})
Компонент может принимать столько входных параметров, сколько захотите, и по умолчанию любое значение может быть передано в любой входной параметр. В шаблоне выше вы увидите, что мы можем получить доступ к этому значению в экземпляре компонента, как и к любому свойству data.
После объявления входного параметра вы можете передавать данные в него через пользовательский атрибут, например:



Однако, в типичном приложении у вас наверняка будет массив записей в data:
new Vue({
el: '#blog-post-demo',
data: {
posts: [
{ id: 1, title: 'My journey with Vue' },
{ id: 2, title: 'Blogging with Vue' },
{ id: 3, title: 'Why Vue is so fun' }
]
}
})
Тогда нужно отобразить компонент для каждой записи:
v-for="post in posts"
v-bind:key="post.id"
v-bind:title="post.title"
>
Как мы видим выше, можно использовать v-bind для динамической передачи данных во входные параметры. Это особенно полезно, когда вы не знаете заранее точного содержимого, которое потребуется отобразить, например после загрузки записей блога из API.
На данный момент это всё, что вам нужно знать о входных параметрах. Но когда вы закончите изучение этой страницы и разберётесь со всей информацией представленной здесь — мы рекомендуем вернуться позднее и прочитать полное руководство по входным параметрам.