# Указание типа входных параметров

Входные параметры, можно указывать в виде массива строк:

```javascript
props: ['title', 'likes', 'isPublished', 'commentIds', 'author']
```

Однако лучше, когда каждый входной параметр будет определённого типа. В этих случаях вы можете перечислить входные параметры объектом, где свойство и значение будут содержать информацию об имени входного параметра и его типе, соответственно:

```javascript
props: {
  title: String,
  likes: Number,
  isPublished: Boolean,
  commentIds: Array,
  author: Object,
  callback: Function,
  contactsPromise: Promise // или любой другой конструктор
}
```

Это не только документирует ваш компонент, но также предупреждает пользователей в консоли JavaScript браузера, если они передают неправильный тип.

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

Во входные параметры  можно передавать статические значения, например:

```markup
<blog-post title="My journey with Vue"></blog-post>
```

Входные параметры, могут присваивать динамическое значение с помощью `v-bind`, например:

```markup
<!-- Динамически присваиваем значение переменной -->
<blog-post v-bind:title="post.title"></blog-post>

<!-- Динамически присваиваем значение комплексного выражения -->
<blog-post
  v-bind:title="post.title + ' написанный ' + post.author.name"
></blog-post>
```

В этих двух примерах мы передаём строковые значения, но могут передаваться значения *любого типа* во входной параметр.

## Передача чисел

```markup
<!-- Несмотря на то, что `42` статическое значение, нам нужен v-bind, -->
<!-- чтобы сообщить Vue, что это выражение JavaScript, а не строка.   -->
<blog-post v-bind:likes="42"></blog-post>

<!-- Динамическое присвоение значения переменной. -->
<blog-post v-bind:likes="post.likes"></blog-post>
```

## Передача булевых значений

```markup
<!-- Указание входного параметра без значения будет означать `true`. -->
<blog-post is-published></blog-post>

<!-- Несмотря на то, что `false` статическое значение, нам нужен v-bind -->
<!-- чтобы сообщить Vue, что это выражение JavaScript, а не строка.     -->
<blog-post v-bind:is-published="false"></blog-post>

<!-- Динамическое присвоение значения переменной. -->
<blog-post v-bind:is-published="post.currentUserFavorited"></blog-post>
```

## Передача массивов

```markup
<!-- Несмотря на то, что указан статический массив, нам нужен v-bind, -->
<!-- чтобы сообщить Vue, что это выражение JavaScript, а не строка.   -->
<blog-post v-bind:comment-ids="[234, 266, 273]"></blog-post>

<!-- Динамическое присвоение значения переменной. -->
<blog-post v-bind:comment-ids="post.commentIds"></blog-post>
```

## Передача объектов

```markup
<!-- Несмотря на то, что указан статический объект, нам нужен v-bind, -->
<!-- чтобы сообщить Vue, что это выражение JavaScript, а не строка.   -->
<blog-post
  v-bind:author="{ name: 'Veronica', company: 'Veridian Dynamics' }"
></blog-post>

<!-- Динамическое присвоение значения переменной. -->
<blog-post v-bind:author="post.author"></blog-post>
```

## Передача свойств объекта

Если вы хотите передать все свойства объекта в качестве входных параметров, вы можете использовать `v-bind` без аргументов (`v-bind` вместо `v-bind:prop-name`). Например, для объекта `post`:

```javascript
post: {
  id: 1,
  title: 'My Journey with Vue'
}
```

Следующий шаблон:

```markup
<blog-post v-bind="post"></blog-post>
```

Будет аналогичен:

```markup
<blog-post
  v-bind:id="post.id"
  v-bind:title="post.title"
></blog-post>
```
