Сегодня мы поговорим о том как создать required prop, но не обычный, а то который будет required только при определенных условиях. Для чего это нужно? Все очень просто, чтобы при добавления его в другой компонент мы не забыли про этот prop и у нас ничего не сломалось :)
Допустим мы создаем простой компонент у которого на входе есть один required prop и это компонент является оберткой для другого компонента.
Представим, что компонент Foo нам будет возвращать какой-то текст ы зависимости от его required prop 'foo', а выше стоящий div будет накладывать определенные стили к примеру: div это будет кнопка с padding, background, border-radius, ... .
Но в какой-то момент мы решим, что нам не достаточно просто текста который возвращает Foo через свой prop, мы хотим получить кнопку у которой будут все те же стили, но с другим контентом.
И сразу в голову приходит использовать default и отказать от required для prop foo, но в таком случае все работать будет так как default есть, а это значит, что и текст будет, а мы хотели получить пустую кнопку. Плюс мы хотели бы сохранить сообщение о том, что параметр является не валидным или отсутствует.
В таком случае я предлагаю следующее решение:
Смысл этого решения заключается в том, что при добавления этого компонента в другой компонент, и если не указывать один из параметров, то Vue выдаст ошибку. Тем самым еще в момент отладки можно уже определить, что не так с компонентом.
Плюс этого решения заключается в том, что любой из параметров является required хоть и не указан как required, так же, то что теперь есть возможность использовать как компонент обертку над компонентом Foo, так и просто как обертку над slot. Так же теперь если мы не укажем prop=foo, то у нас не будет использоваться что-то по дефолту и выдаст ошибку о том, что нужно указать один из параметров.
Конечно можно было возразить и сказать, что можно было сделать условие если !foo то использовать template=empty, но тогда всегда использовался бы template=empty, но это не совсем правильно, так как изначально этот компонент обертка был предназначен для того, чтобы обернуть компонент Foo, а не быть пустым.
В моем решении Empty является редким кейсом, а Foo по прежнему главным.
В любом случае, если у вас есть решения по интересней, всегда готов прочитать в комментариях и рассмотреть их.