Vue props. Часть 2.

Сегодня мы разберем как работать с пропсами в компоненте.

Трансформирование

Ситуация следующая: мы передали необработанные данные в компонент и нам нужно их обработать. Или нам нужно сгруппировать строку из нескольких параметров.

Как можно видеть из примера - мы не ограничены в наших действиях и можем трансформировать данные как пожелаем.

Локальная работа с данными

Мы передали данные в компонент и теперь хотим, что-то с ними делать. Но у нас есть ограничение - мы не можем мутировать данные из пропсов. Что делать? Использовать data - локальные свойства.

Идея очень проста - данные из пропсов мы используем как начальное значение для текущей data.

Синхронизация с родителем

Но иногда нам нужно синхронизировать данные с родителем. Рассмотрим, как это сделать.

Для это мы используем связку computed в форме get/set + emit. С помощью get , мы отдает текущие значение, а с помощью set отправляем emit на обновление текущего значения.

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

Заключение

Итак, мы познакомились с тремя способами работы с пропсами в компоненте. Используйте первый способ для нормализации ваших данных. Поверьте, данное действие не будет лишним, даже если вы уверены, что ваши данные находятся в идеальном виде. Всегда что-то может пойти не так. Второй необходим, если вы собираетесь использовать данные из пропсов как локальные свойства. А третий, я бы рекомендовал использовать исключительно с простыми преобразованиями. типами: String, Number и Boolean.