Добавление свойств в компонент

6 мин

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

Создание компонента

Начните с создания компонента.

В Visual Studio Code создайте файл с именем BookingList.vue в папке src/components.
В BookingList.vue введите vue и выберите <vue> с default.vue в меню фрагментов.

Фрагмент создаст структуру по умолчанию.

Регистрация свойств и вычисляемых значений

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

Откройте файл src/components/BookingList.vue, если он еще не открыт.
Внутри фигурных скобок ({ }) для export default добавьте следующий код, чтобы создать свойство с именем bookings и свойство computed:
```
props: {
    bookings: Array
},
computed: {
    totalDisplay() {
        let totalCost = 0;
        if (this.bookings && this.bookings.length > 0) {
            totalCost = 
                this.bookings.map(b => b.price)
                            .reduce((a, b) => a + b);
        }
        return '$ ' + totalCost.toLocaleString('en-US');
    }
}
```
Обратите внимание, что totalDisplay может получить доступ к свойству bookings с помощью this, что позволяет получить доступ к данным или другим свойствам, объявленным как часть нашего компонента. Мы создадим код для вычисления общей суммы всех цен, перечисленных в bookings, и для создания отображения строки.

Добавление шаблона для отображения

Добавим шаблон, чтобы отобразить сведения о наших бронированиях. Используйте v-for для циклического прохода по всем бронированиям и вычисляемое свойство totalDisplay, которое мы создали ранее.

Откройте файл src/components/BookingList.vue, если он еще не открыт.
Внутри элемента <template> добавьте следующий HTML:
```
<section>
<h2>
    Here's your current bookings:
</h2>

<div class="row" v-for="(booking, index) in bookings" :key="index">
    <div>{{ booking.name }} </div>
</div>

<h3 class="row">
    Total: {{ totalDisplay }}
</h3>
</section>
```
Наш код проходит по всем бронированиям с v-for и отображает cabin. Затем мы вызываем totalDisplay, чтобы отобразить общую стоимость всех бронирований.

Добавление компонента на главную страницу

Давайте воспользуемся созданным нами компонентом и передадим список бронирований.

Откройте src/components/Host.vue.
Добавьте новую строку под открывающим тегом <script> и перед export default.
Добавьте следующий код (включая комментарий) для импорта компонента BookingList:
```
import BookingList from './BookingList.vue';
// TODO: Register next component
```
Зарегистрируйте компонент, добавив следующий код (включая комментарий) под комментарием TODO: Add components:
```
components: {
    BookingList,
    // TODO: Add next component

},
```
Внимание

Две запятые являются обязательными, так как в будущем мы добавим дополнительные значения.

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

После регистрации компонента вызовем его на нашей странице. Мы будем использовать созданный ранее массив bookings для заполнения бронирований на странице.

Откройте файл src/components/Host.vue, если он еще не открыт.
Под комментарием TODO: Add booking-list добавьте следующий код, чтобы использовать компонент booking-list:
```
<booking-list :bookings="bookings"></booking-list>
```

Тестирование страницы

Теперь, когда компонент зарегистрирован и настроен, давайте протестируем страницу.

Сохраните все файлы, выбрав Файл>Сохранить все.
Затем вернитесь в окно браузера с http://localhost:8080 и обновите страницу.

Теперь на странице отображается пример бронирования.

Поздравляем! Вы создали компонент со свойствами.