Имена HTML-атрибутов являются регистро-независимыми, поэтому браузеры интерпретируют любые прописные символы как строчные. Это означает, что при использовании шаблонов в DOM входные параметры в camelCase-стиле должны использовать свои эквиваленты в стиле kebab-case (разделённые дефисами)

Опять же, если вы используете строковые шаблоны, то это ограничение не применяется

До сих пор мы видели только входные параметры, перечисленные в виде массива строк

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

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

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

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

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

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

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

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

Все входные параметры образуют одностороннюю привязку между дочерним свойством и родительским: когда родительское свойство обновляется — оно будет передаваться дочернему, но не наоборот. Это предотвращает случайное изменение дочерними компонентами родительского состояния, что может затруднить понимание потока данных вашего приложения.

Кроме того, каждый раз, когда обновляется родительский компонент, все входные параметры дочернего компонента будут обновлены актуальными значениями. Это означает, что вы не должны пытаться изменять входной параметр внутри дочернего компонента. Если вы это сделаете, Vue отобразит предупреждение в консоли.

Компоненты могут указывать требования к своим входным параметрам, такие как определение типа, которые вы уже видели. Если эти требования не выполнены — Vue предупредит вас сообщением в JavaScript-консоли браузера. Это особенно полезно при разработке компонента, который предназначен для использования другими.

Чтобы указать валидации входного параметра, вы можете предоставить в props объект с валидациями для проверки значения, вместо массива строк

Когда валидация входного параметра заканчивается ошибкой — Vue выдаст предупреждение в консоли (если используется сборка для разработки)

Кроме того, type также может быть пользовательской функцией-конструктором и валидация будет выполняться проверкой с помощью instanceof. Например, если существует следующая функция-конструктор

Вы можете использовать

чтобы проверить, что значение входного параметра author было создано с помощью new Person

Обычные атрибуты — это атрибуты, передаваемые в компонент, но не имеющие определения соответствующего входного параметра в компоненте.

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

Например, представьте, что мы используем сторонний компонент bootstrap-date-input с плагином Bootstrap, который требует указания атрибута data-date-picker на элементе input. Мы можем добавить этот атрибут к нашему экземпляру компонента

И атрибут data-date-picker="activated" будет автоматически добавлен в корневой элемент bootstrap-date-input

Представьте, что это шаблон для bootstrap-date-input

Чтобы добавить тему для нашего плагина выбора даты, нам может понадобиться добавить определённый класс

Для большинства атрибутов значение, предоставляемое компоненту, будет заменять значение, заданное компонентом. Например, передача type="text" будет заменять type="date" и, вероятно, ломать всё! К счастью, работа с атрибутами class и style немного умнее, поэтому оба значения будут объединены в итоговое: form-control date-picker-theme-dark

Если вы не хотите, чтобы корневой элемент компонента наследовал атрибуты, вы можете установить inheritAttrs: false в опциях компонента

Это может быть особенно полезно в сочетании со свойством экземпляра $attrs, которое содержит имена атрибутов и значения, переданные компоненту

С помощью inheritAttrs: false и $attrs вы можете вручную определять к какому элементу должны применяться атрибуты, что часто требуется для базовых компонентов:

Этот шаблон позволяет вам использовать базовые компоненты больше как обычные HTML-элементы, не беспокоясь о том, какой элемент будет у него корневым