Вот, что мы с Вами сделаем на этом уроке.
Пройдем по этой ссылке: Components & Props ➳
... Все внимательно послушаем, посмотрим, прочитаем.
Затем сделаем конспект (мой см ниже).
Конспект
Компоненты и реквизиты (Components & Props)
В этом уроке мы рассмотрим концепцию компонентов и реквизитов.
Чтобы начать этот урок, вы можете либо получить программой git коммандой checkout исходный код в ветке L9-startрепозитория, либо перейти в CodePen, чтобы взять файлы там.
Примечание переводчика
Чтобы перейти на ветку с файлами начала урока 9 выполните команду:
git checkout L9-start
Наша Цель
Выполнить рефакторинг нашего тестового приложения, чтобы использовать компонент продукта (product). И этот компонент пусть использует реквизит (prop).
Строительные блоки приложения Vue
В современных интерфейсных JavaScript-фреймворках компоненты являются строительными блоками приложения, и это, безусловно, относится и к Vue. Вы можете представить себе компоненты, немного похожие на блоки Лего (Legos), которые вы можете подключать друг к другу в иерархии генеалогического дерева компонентов.
Любая типичная веб-страница может состоять из нескольких компонентов. Обычное дело для комонентов быть "родителями", когда у них есть дочерние компоненты, вложенные в них.
Создание нашего первого компонента
Давайте зайдем в наше приложение и создадим наш первый компонент. Поскольку наше приложение в конечном итоге будет иметь несколько компонентов, мы создадим папку компонентов components, внутри которой создадим наш первый компонент, называемый ProductDisplay.js.
Синтаксис для создания компонента выглядит следующим образом:
📄 components/ProductDisplay.js
app.component('product-display', {})
Первый аргумент - это имя компонента, в данном случае 'product-display', а второй аргумент - объект для настройки нашего компонента (аналогично объекту options, используемому для настройки нашего корневого приложения Vue).
Шаблон
Поскольку нам нужно, чтобы наш компонент имел структуру, мы добавим свойство шаблона (template) и вставим весь HTML-код на основе продукта, который в настоящее время находится в index.html сюда, в литерал шаблона (template literal).
Обратите внимание, что мы не изменили ничего из этого кода, мы просто перемещаем его в компонент отображения продукта product-display, чтобы он был там инкапсулирован. Если вам интересно, что там делает /*html*/, ответ простой. Эта строка активирует расширение VS-кода
es6-string-html
, которое дает нам подсветку синтаксиса, даже если мы находимся в этом литерале шаблона.
Данные и методы
Теперь, когда мы дали этому компоненту его шаблон или его структуру, нам нужно предоставить ему его данные и методы, которые все еще живут в main.js. Так что мы вставим их прямо сейчас:
Мы обязательно удалим корзину (cart) из данных (data) здесь, потому что нам не нужно, чтобы у каждого товара была своя корзина.
Очистка main.js
Теперь, когда мы инкапсулировали весь этот код для конкретного продукта в наш компонент отображения продукта product-display, мы можем очистить наш main.js файл.
Если мы проверим это в браузере, мы увидим, что все по-прежнему отображается так же, как и раньше, но теперь, когда мы все переставили, кнопка "Добавить в корзину" ("Add to Cart") больше не увеличивает корзину. Мы исправим это на следующем уроке.
На данный момент, чтобы показать вам, насколько полезными могут быть эти повторно используемые блоки кода, я собираюсь добавить еще два компонента отображения продукта (product-display).
Когда мы обновим браузер, мы увидим, что все они отображаются. Каждый из них функционирует независимо.
Пропсы
Теперь, когда мы начинаем изучать, как инкапсулировать повторно используемый код в эти компоненты, что происходит, когда нашему компоненту нужно что-то, что находится вне его самого? Например, что, если у родителя, так сказать, были какие-то данные о сообщении (message), и ребенок нуждался в них? Поскольку компонент имеет свою собственную изолированную область действия, он не может выйти за пределы самого себя, чтобы захватить что-то, что находится за пределами его области действия.
The answer here is props. These are custom attributes for passing data into a component. They function kind of like a funnel, into which you can pass the data the component needs.
Ответ здесь - пропсы (props). Это пользовательские атрибуты для передачи данных в компонент. Они функционируют как воронка, в которую вы можете передавать данные, необходимые компоненту.
Давайте добавим возможность для нашего компонента отображения продукта product-display использовать проп (реквизит, prop).
Внедрение в наш компонент проп (реквизит, prop).
Давайте дадим нашему рутовому приложению Vue, расположенному в main.js, новое свойство данных, которое указывает, был ли пользователь пользователем премиум-класса или нет (premium).
Если пользователь премиум-класса (premium), его доставка будет бесплатной. Поэтому нашему компоненту отображения продукта (product-display) необходим доступ к этим данным. Другими словами, ему нужен пользовательский атрибут (воронка), в который мы можем передавать эти данные. Давайте добавим это сейчас, и это мы сделаем, предоставив компоненту опцию пропсов (props) и добавив к нему проп (prop) под названием премиум (premium).
Обратите внимание, что свойство пропсов Vue имеет встроенную валидацию, поэтому мы можем указать такие вещи, как тип реквизита (type), обязателен ли он (required) и т.д.
Обратите внимание, как мы используем сокращение для v-bind, чтобы мы могли реактивно получать новое значение premium, если оно обновляется (от true до false).
Используя проп
Теперь, когда наш компонент отображения продукта product-display имеет премиальный проп premium, мы можем использовать его внутри компонента. Помните, мы хотим использовать тот факт, является ли пользователь премиум-классом или нет, чтобы определить, сколько ему нужно заплатить за доставку.
Вычисляемое свойство проверяет, является ли премиум проп (premium) истинным (true), и если да, возвращает 'Free' ("Бесплатно"). В противном случае он возвращает 2.99
Задача кодирования
Мы подошли к концу этого урока, теперь будем решать новые задачи кодирования.
Вот, что надо сделать.
Создайте новый компонент с именем 'product-details', который получал бы details через проп details.
Вы можете найти код решения, загрузив L9-end ветвь репозитория или просмотрев решение в Codepen.
Чтобы перейти на ветку с файлами окончания урока 9 выполните команду: