vue что такое props

В чём разница между props и data в Vue.js

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

Так в чём же отличие между props и data?

Data — это приватное хранилище любого компонента, в котором вы можете хранить любые данные.

Props — то, как вы передаёте данные из родительского компонента в дочерний.

В этой статье вы узнаете:

Что такое props?

В Vue props — это способ передачи данных из родительского компонента ниже в дочерний.

Когда мы проектируем приложение, то в конечном итоге создаём структуру, называемую деревом. Это похоже на семейное дерево:

Данные передаются вниз от корневого компонента, который находится в самом верху. Похоже на то, как передаётся генетика из поколения в поколение, так же и родительские компоненты передают props дальше своим дочерним компонентам.

Во Vue мы добавляем props в компоненты в секции :

Однако, когда мы обращаемся к пропсам внутри компонента, то мы не можем их изменить, потому что не являемся их владельцами (точно также вы не можете изменить гены, которые вам передали родители).

Заметьте: на самом деле вы можете изменить пропсы, но это плохая идея, потому что вы также меняете и значение этих свойств у родителей, что может привести к путанице.

Что такое Data?

Data — это память каждого компонента. Это место, где вы можете хранить ваши данные и другие переменные, которые вам необходимы.

Если мы делаем приложение-счётчик, то мы будем отслеживать и хранить переменную-счётчик count в data :

Этот data-параметр является приватным и доступен только внутри компонента. Другие компоненты не имеют к нему доступа.

Заметьте: На самом деле вы можете получать доступ к этому data-параметру из других компонентов, но это очень-очень плохая идея. Не стоит так делать!

Если вам нужно передать данные между компонентами, то используйте props для передачи вниз по дереву (дочерним компонентам), или события для передачи вверх по дереву (родительским компонентам).

Props и Data реактивны

С Vue вам не нужно думать о том, когда компонент обновит сам себя и перерендерится с новыми данными. Всё потому, что Vue реактивный.

Вместо вызова setState в случае каких-то изменений, вы просто меняете это напрямую. Пока вы обновляете реактивные свойства (props, computed props и что-либо в data), Vue знает как следить за изменениями.

Возвращаясь к нашему приложению-счётчику, давайте посмотрим на методы:

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

Предотвращение конфликта имён

Есть ещё одна вещь, которую делает Vue, что делает разработку ещё прекраснее.

Давайте определим некоторые props и data в компоненте:

Мы можем получить к ним доступ через this.propA или this.dataA :

Vue выдаст warning в такой ситуации, потому что не будет знать что конкретно вы имели ввиду и к чему пытались получить доступ в каждом конкретном случае.

Настоящая магия и чудо происходят в тот момент, когда вы используете props и data вместе.

Использование props и data вместе

Мы изучили, чем props и data отличаются. Давайте посмотрим на примере простого приложения, почему их стоит использовать одновременно.

Давайте представим, что мы делаем социальную сеть и работаем над страницей пользователя. Мы дошли до того момента, когда нам нужно вывести контактную информацию пользователя.

Мы будем отображать это с помощью компонента ContactInfo :

Компонент ProfilePage показывает фото и имя пользователя. Он также содержит объект с данными пользователя в data.

Для начала мы должны импортировать компонент ContactInfo в наш основной компонент ProfilePage :

Во-вторых, мы должны добавить компонент в секцию :

Поскольку данные (data) передаются только вниз, это означает, что мы должны помещать данные (data) достаточно высоко в дереве компонентов. Так мы будем иметь возможность передать все данные (data) с помощью свойств (props) в любой дочерний компонент.

Источник

C O DEGURU

Всегда указывайте тип параметра

Этот простой шаг поможет предовратить множество ошибок, отследить которые крайне тяжело. Особенно, если ваш компонент будут использовать другие разработчики. Допустим, у нас есть компонент, в который необходимо передать число. Было бы здорово, если бы мы могли контролировать этот процесс и не допустить, чтобы кто-то передал туда, например, строку. И для этого достаточно всего одной строчки:

Ограничиваем возможные значения параметров

Допустим, у нас есть компонент, который показывает аватар пользователя. И он может иметь три стилистических варианта: квадратный(square), со скруглёнными углами(round) и круглый(circle). Соответственно, в параметрах компонента необходимо передать значение для этого параметра:

И непосредственно в компоненте:

Теперь, если вы попытаетесь передать неверную строку, Vue сообщит вам об этом.

Проверяем тип данных внутри массива или объекта

Ещё один вариант для использования валидатора. Например, у нас есть компонент для вывода тэгов. В него нужно передать список тэгов в виде массива:

В самом компоненте мы напишем:

Всё вроде хорошо. Тип параметра указали. Но что если внутри массива нам пришлют не строку? Это может поломать работу компонента. Поэтому лучше бы нам быть уверенными, что всё под контролем:

Теперь мы можем быть уверены в том, что при попытке передать в компонент неверные данные, мы получим от Vue предупреждение. Валидатор даёт нам практически полный контроль над входными параметрами.

Указывайте дефолтное значение только тогда, когда это необходимо

Для входных параметров можно указать дефолтное значение:

Здесь правило очень простое: если параметр обязательный, то дефолтное значение не нужно. Ведь простая логика подсказывает, что если параметр обязательный, то он всегда будет передан (иначе компонент просто не будет работать) и дефолтное значение никогда не будет использовано. А зачем писать лишний код?

Источник

# Введение

# Почему появился Composition API?

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

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

Представим, что в приложении есть компонент, который отображает список репозиториев конкретного пользователя. Поверх него, нужно реализовать функциональность поиска и фильтрации. Компонент, управляющий подобным отображением, может выглядеть так:

Этот компонент имеет несколько обязанностей:

Пример большого компонента, в котором сгруппированы по цвету его логические блоки.

Подобная фрагментация усложняет понимание и поддержание таких сложных компонентов. Разделение по опциям делает менее заметными логические блоки используемые в них. Кроме того, при работе над одной логической задачей приходится постоянно «прыгать» между блоками в поисках соответствующего кода.

Было бы удобнее, если соответствующий логическому блоку код можно разместить рядом. И это именно то, чего позволяет добиться Composition API.

# Основы Composition API

# Опция компонента setup

Опция setup должна быть функцией, которая принимает аргументами props и context (о которых подробнее поговорим дальше). Кроме того, всё что возвращается из функции setup будет доступно для остальных частей компонента (вычисляемых свойств, методов, хуков жизненного цикла и т.д.), а также в шаблоне компонента.

Добавим setup в компонент:

Извлечём логику первого логического блока (отмеченной как «1» в исходном примере).

Начнём с самых очевидных частей:

Начало положено! Пока что ещё не всё работает, потому что переменная repositories не реактивна. С точки зрения пользователя, список репозиториев будет оставаться пустым. Давайте это исправим!

# Реактивные переменные с помощью ref

Наличие объекта-обёртки вокруг любого значения позволяет безопасно использовать его в любой части приложения, не беспокоясь о потере реактивности где-то по пути.

Другими словами, ref создаёт реактивную ссылку к значению. Концепция работы со ссылками используется повсеместно в Composition API.

Возвращаясь к примеру, создадим реактивную переменную repositories :

Готово! Теперь каждый вызов getUserRepositories будет изменять repositories и обновлять вид блока, чтобы отобразить изменения. Компонент станет выглядеть так:

Начнём с хука жизненного цикла.

# Использование хуков жизненного цикла внутри setup

Эти функции принимают аргументом коллбэк, который выполнится при вызове компонентом хука жизненного цикла.

Добавим его в функцию setup :

# Отслеживание изменений с помощью watch

Простой пример, чтобы понять как это работает:

Эквивалент при использовании Options API:

Более подробную информацию о watch можно найти в продвинутом руководстве.

Источник

# Props

This page assumes you’ve already read the Components Basics. Read that first if you are new to components.

# Prop Types

So far, we’ve only seen props listed as an array of strings:

Usually though, you’ll want every prop to be a specific type of value. In these cases, you can list props as an object, where the properties’ names and values contain the prop names and types, respectively:

This not only documents your component, but will also warn users in the browser’s JavaScript console if they pass the wrong type. You’ll learn much more about type checks and other prop validations further down this page.

# Passing Static or Dynamic Props

So far, you’ve seen props passed a static value, like in:

You’ve also seen props assigned dynamically with v-bind or its shortcut, the : character, such as in:

In the two examples above, we happen to pass string values, but any type of value can actually be passed to a prop.

# Passing a Number

# Passing a Boolean

# Passing an Array

# Passing an Object

# Passing the Properties of an Object

If you want to pass all the properties of an object as props, you can use v-bind without an argument ( v-bind instead of :prop-name ). For example, given a post object:

The following template:

Will be equivalent to:

# One-Way Data Flow

All props form a one-way-down binding between the child property and the parent one: when the parent property updates, it will flow down to the child, but not the other way around. This prevents child components from accidentally mutating the parent’s state, which can make your app’s data flow harder to understand.

In addition, every time the parent component is updated, all props in the child component will be refreshed with the latest value. This means you should not attempt to mutate a prop inside a child component. If you do, Vue will warn you in the console.

There are usually two cases where it’s tempting to mutate a prop:

Note that objects and arrays in JavaScript are passed by reference, so if the prop is an array or object, mutating the object or array itself inside the child component will affect parent state.

# Prop Validation

Components can specify requirements for their props, such as the types you’ve already seen. If a requirement isn’t met, Vue will warn you in the browser’s JavaScript console. This is especially useful when developing a component that’s intended to be used by others.

When prop validation fails, Vue will produce a console warning (if using the development build).

# Type Checks

The type can be one of the following native constructors:

In addition, type can also be a custom constructor function and the assertion will be made with an instanceof check. For example, given the following constructor function exists:

# Prop Casing (camelCase vs kebab-case)

HTML attribute names are case-insensitive, so browsers will interpret any uppercase characters as lowercase. That means when you’re using in-DOM templates, camelCased prop names need to use their kebab-cased (hyphen-delimited) equivalents:

Again, if you’re using string templates, this limitation does not apply.

Deployed on Netlify.
Caught a mistake or want to contribute to the documentation? Edit this on GitHub!

(opens new window)
Last updated: 2021-11-10, 01:51:22 UTC

Источник

# Входные параметры

Подразумевается, что уже изучили и разобрались с разделом Основы компонентов. Если нет — прочитайте его сначала.

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

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

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

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

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

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

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

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

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

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

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

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

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

Будет аналогичен такой записи:

# Однонаправленный поток данных

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

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

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

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

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

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

# Валидация входных параметров

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

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

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

# Проверка типа

Значением type может быть один из следующих нативных конструкторов:

То можно использовать следующим образом:

# Регистр в именах входных параметров

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

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

(opens new window)
Последнее обновление страницы: 16 дней назад

Источник