Большое фото

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

Компонент. Lightbox.vue — новый. В его шаблоне тёмный слой поверх страницы (класс lightbox), в нём белая коробка (box), а в коробке — кнопка закрытия ✕ (класс close). Стили готовы. Своего фото у лайтбокса нет: то, что он показывает, приходит из App.vue через слоты.

• В слот по умолчанию попадает само фото: эмодзи в div с классом big, а фон — цвет фото. Класс big лежит в style.css, потому что содержимое слота оформляет родитель, а не лайтбокс.
• Слот с именем caption, в абзаце с классом caption под фото, получает подпись и место, например Рассвет, Лох-Ломонд.

Кнопка закрытия принадлежит лайтбоксу. Сама она ничего не прячет: она отправляет событие close, а что произойдёт дальше, решает App.vue.

Задание. Когда фото выбрано, App.vue показывает лайтбокс с ним. Когда лайтбокс отправляет close, App.vue скрывает его, и выбранных фото больше нет.

Совет: показывайте лайтбокс через v-if. Пока он скрыт, его на странице нет вообще, а когда он показан, фото выбрано, так что его содержимое может использовать это фото.