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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

<!-- Указание входного параметра без значения будет означать `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>

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

<!-- Несмотря на то, что указан статический массив, нам нужен 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>

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

<!-- Несмотря на то, что указан статический объект, нам нужен 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:

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

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

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

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

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