Добавление пользовательского события в компонент

7 мин

Завершим приложение, добавив форму. Форма будет содержать раскрывающийся список, в котором пользователь сможет выбрать нужный класс, и кнопку для бронирования круиза. Для этого вы настроите новый компонент и создадите событие для кнопки. В конце вы вызовете новый компонент из Host.vue.

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

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

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

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

Добавление кода для компонента

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

Откройте файл src/components/BookingForm.vue, если он еще не открыт.
Внутри фигурных скобок ({ }) для export default добавьте следующий код для настройки компонента:
```
props: {
    cabins: Array,
},
emits: ['bookingCreated'],
data() {
    return {
        cabinIndex: -1
    }
},
methods: {
    bookCabin() {
        if(this.cabinIndex < 0) return;
        this.$emit('bookingCreated', this.cabinIndex);
        this.cabinIndex = -1;
    },
}
```
Этот код начинается с создания свойства cabins для вывода списка доступных классов. Мы предоставляем одно событие с именем с bookingCreated помощью emits. Мы создаем элемент данных с именем cabinIndex для хранения выбранного индекса классов.

В конце мы создаем метод с именем bookCabin. Этот метод проверяет значение cabinIndex и выполняется, только если значение равно 0 или больше (это означает, что пользователь выбрал класс). Если эта проверка пройдет успешно, мы выпустим событие, возвращающее выбранное значение cabinIndex, и сбросим значение cabinIndex до –1.

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

Добавив код, можно заняться отображением. Мы хотим создать раскрывающийся список для выбора класса и кнопку для бронирования поездки. Кнопка будет вызывать созданную ранее функцию bookCabin.

Откройте файл src/components/BookingForm.vue, если он еще не открыт.
Добавьте следующий код в теги <template>, чтобы создать отображение:
```
<section>
<h2>Book now!</h2>
<form>
    <div class="row">
        <label for="cruise-cabin">Select class:</label>
        <select id="cruise-cabin" v-model="cabinIndex">
            <option disabled value="-1">Select a cabin</option>
            <option v-for="(cabin, index) in cabins" :value="index" :key="index">
                {{ cabin.name }} $ {{ cabin.price.toLocaleString('en-US') }}
            </option>
        </select>
    </div>
    <div class="row">
        <button class="button" type="button" @click="bookCabin">Book now!</button>
    </div>
</form>
</section>
```
HTML создает форму. Для создания раскрывающегося списка мы проходим по свойству cabins с помощью v-for. Мы привязываем модель тега select к cabinIndex, который будет возвращен, когда пользователь выберет класс и нажмет кнопку. Затем мы настраиваем кнопку для вызова bookCabin при нажатии.

Добавление BookingForm на страницу

Для завершения добавьте только что созданную BookingForm в приложение, добавив ее в файл Host.vue.

Откройте src/components/Host.vue.
Импортируйте BookingForm, добавив следующий код после комментария TODO: Register next component:
```
import BookingForm from './BookingForm.vue';
```
Добавьте BookingForm в список доступных компонентов, добавив следующий код после комментария TODO: Add next component:
```
BookingForm
```
Добавьте метод для обработки пользовательского события bookingCreated, добавив следующий код после комментария TODO: Add methods:
```
methods: {
    addBooking(cabinIndex) {
        const cabin = this.cruise.cabins[cabinIndex];
        const booking = {
            cabin: cabin.name,
            price: cabin.price
        }
        this.bookings.push(booking);
    }
}
```
Функция addBooking получает выбранный класс с помощью индекса. Затем функция создает новый объект booking с помощью cabin.name и cabin.price. Затем мы добавляем booking в массив bookings.
Используйте компонент booking-form, добавив следующий код после комментария TODO: Add booking-form:
```
<booking-form @booking-created="addBooking" :cabins="cruise.cabins"></booking-form>
```
Мы подключаем функцию addBooking к событию booking-created и передаем список классов для вывода.

Отображение типа каюты

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

Откройте src/components/BookingList.vue.

Внутри элемента <template> измените имя поля в div с booking.name на booking.cabin:

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

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

После добавления всего кода давайте протестируем страницу.

Сохраните все файлы, выбрав Файл>Сохранить все.
Перейдите к http://localhost:8080 и обновите страницу.
Выберите класс из раскрывающегося списка и нажмите кнопку.

Появится новое резервирование.

Вы создали и вызвали компонент с пользовательским событием.