83 lines
4.6 KiB
Markdown
83 lines
4.6 KiB
Markdown
---
|
||
title: Components
|
||
localeTitle: Компоненты
|
||
---
|
||
|
||
## Компоненты
|
||
|
||
Классическая проблема веб девелоперов - работа с HTML дупликатами, но не как в
|
||
простом примере со списком, иногда тебе просто нужно импортировать один и тот же
|
||
код в разные места. Vue.js дает вам эту возможность благодаря компонентам.
|
||
|
||
Представим вы разрабатываете landing page для продукта вашей компании и вам нужно
|
||
отобразить 4 его главных приемущества в одинаковом стиле, например карточек, с иконкой,
|
||
заголовком и небольшим описанием.
|
||
|
||
```javascript
|
||
Vue.component('feature-card', {
|
||
props: ["iconSrc", "iconAltText", "featureTitle", "featureDescription"],
|
||
template: `
|
||
<div class="card">
|
||
<div class="icon-wrapper">
|
||
<img
|
||
class="icon"
|
||
:src="iconSrc"
|
||
:alt="iconAltText">
|
||
</div>
|
||
<h4 class="title">
|
||
{{ featureTitle }}
|
||
</h4>
|
||
<p class="description">
|
||
{{ featureDescription }}
|
||
</p>
|
||
</div>
|
||
`
|
||
});
|
||
```
|
||
|
||
> Заметьте что мы использовали синтаксис ':src' для атрибута 'src'.
|
||
Это ничего не меняет, это просто сахар и означает он следующее 'v-bind:src' --
|
||
когда вы ходите забиндить атрибут к переменной вы можете заменить 'v-bind:' на ':'
|
||
|
||
В этом снипете мы сделали много нового:
|
||
* мы создали новый компонент с названием 'feature-card'
|
||
* мы определили основную **структуру** компонента 'feature-card' с помощью атрибута 'template'
|
||
* мы описали список свойств которые примет компонент из списка 'props'
|
||
|
||
Так как мы определили имя компонента, как только мы захотим использовать его еще раз,
|
||
мы можем ссылаться на него используя его тэг. В нашем примере мы можем использовать тэг '<feature-card>':
|
||
|
||
```html
|
||
<div id="app">
|
||
<feature-card
|
||
iconSrc="https://freedesignfile.com/upload/2017/08/rocket-icon-vector.png"
|
||
iconAltText="rocket"
|
||
featureTitle="Processing speed"
|
||
featureDescription="Our solution has astonishing benchmarks grades">
|
||
</feature-card>
|
||
</div>
|
||
```
|
||
|
||
В этом случае, мы вызвали '<feature-card>', как будто такой тэг существует,
|
||
установили 'iconSrc' и 'featureTitle' как будто это валидные атрибуты.
|
||
Предназначение Vue.js компонентов: дать вам возможность писать свои инструменты.
|
||
|
||
### Входные параменты или Props
|
||
|
||
Входные параметры это кастомные атрибуты, которые вы можете зарегистрировать в компоненте. Когда значение передается во входной параметр, он становится свойством в этом компоненте. Чтобы передать заголовок в пост нашего блога, мы можем включить его в лист входных параметров, которые принемает этот компонент, используя действие 'props':
|
||
|
||
```js
|
||
Vue.component('feature-card', {
|
||
props: ['title'],
|
||
template: '<h3>{{ title }}</h3>'
|
||
})
|
||
```
|
||
Компонент может иметь сколько угодно входных параментов, любое значение может быть передано в любой входной параметр. В шаблоне выше, вы можете увидеть как мы может получить доступ к этим значениям, точно так же как и с 'data'.
|
||
|
||
Как только входной параметр зарегестрирован, вы можете передавать в него данные используя кастомный атрибут, вот так:
|
||
```html
|
||
<blog-post title="My journey with Vue"></blog-post>
|
||
<blog-post title="Blogging with Vue"></blog-post>
|
||
<blog-post title="Why Vue is so fun"></blog-post>
|
||
```
|