Однако лучше, когда каждый входной параметр будет определённого типа. В этих случаях вы можете перечислить входные параметры объектом, где свойство и значение будут содержать информацию об имени входного параметра и его типе, соответственно:
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, например:
В этих двух примерах мы передаём строковые значения, но могут передаваться значения любого типа во входной параметр.
Передача чисел
<!-- Несмотря на то, что `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:
