Bileşene özel olay ekleme

7 dakika

Şimdi form ekleyerek uygulamayı tamamlayalım. Formda kullanıcının istediği kabini seçmesi için bir açılan liste ve yolculuk rezervasyonu yapmak için bir düğme bulunur. Bunu yeni bir bileşen olarak ayarlayıp düğme için bir olay oluşturacaksınız. Bu yeni bileşeni Host.vue'dan çağırarak bitireceksiniz.

Bileşeni oluşturma

Bileşeni oluşturarak başlayın.

Visual Studio Code'da src/components içinde BookingForm.vue adlı bir dosya oluşturun.
BookingForm.vue'da vue yazın ve kod parçacıkları menüsünden default.vue ile vue'yu> seçin<.

Kod parçacığı varsayılan yapıyı oluşturur.

Bileşenin kodunu ekleme

Şimdi props, emits, data ve yöntemleri kaydetme dahil olmak üzere bileşenin kullanacağı kodu ekleyelim.

Henüz açık değilse src/components/BookingForm.vue dosyasını açın.
için küme ayraçlarının ({ }) export defaultiçine aşağıdaki kodu ekleyerek bileşeni yapılandırın:
```
props: {
    cabins: Array,
},
emits: ['bookingCreated'],
data() {
    return {
        cabinIndex: -1
    }
},
methods: {
    bookCabin() {
        if(this.cabinIndex < 0) return;
        this.$emit('bookingCreated', this.cabinIndex);
        this.cabinIndex = -1;
    },
}
```
Bu kod, kullanılabilir kabinlerin listesini görüntülemek için bir cabins destek oluşturarak başlar. kullanarak emitsadlı bookingCreated bir olayı kullanıma sunarız. Seçilen kabin dizinini depolamak için adlı cabinIndex bir veri öğesi oluştururuz.

adlı bookCabinbir yöntem oluşturarak bitiriyoruz. Bu yöntem değerini denetler cabinIndex ve yalnızca değer 0 veya daha büyükse (kullanıcının bir kabin seçtiği anlamına gelir) çalışır. Bu doğrulama başarılı olursa, seçilen cabinIndexöğesini döndüren olayı yayar ve -1 olarak cabinIndex sıfırlarız.

Görüntüleme şablonunu ekleme

Kod eklendikten sonra dikkatimizi ekrana döndürebiliriz. Kabin seçimi için bir açılan liste ve seyahat için rezervasyon yapmak için bir düğme istiyoruz. Düğme, daha önce oluşturduğunuz işlevi çağırır bookCabin .

Henüz açık değilse src/components/BookingForm.vue dosyasını açın.

Görüntüyü oluşturmak için etiketlerin <template> içine aşağıdaki kodu ekleyin:

<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 formu oluşturur. Açılan listeyi oluşturmak için kullanarak v-for prop'da cabins döngü yapıyoruz. Kullanıcı bir kabin seçip düğmeyi seçtiğinde döndürülecek olan etiketin cabinIndexmodelini select öğesine bağlarız. Ardından düğme seçildiğinde çağrılacak bookCabin şekilde ayarlanır.

Sayfaya BookingForm ekleme

Yeni oluşturulan BookingForm uygulamayı Host.vue'ya ekleyerek tamamlayın.

src/components/Host.vue dosyasını açın.
Açıklamanın arkasına aşağıdaki kodu ekleyerek içeri aktarın BookingFormTODO: Register next component :
```
import BookingForm from './BookingForm.vue';
```
Açıklamanın arkasına TODO: Add next component aşağıdaki kodu ekleyerek kullanılabilir bileşenler listesine ekleyinBookingForm:
```
BookingForm
```
Açıklamadan sonra TODO: Add methods aşağıdaki kodu ekleyerek özel olayı işlemek bookingCreated için yöntemini ekleyin:
```
methods: {
    addBooking(cabinIndex) {
        const cabin = this.cruise.cabins[cabinIndex];
        const booking = {
            cabin: cabin.name,
            price: cabin.price
        }
        this.bookings.push(booking);
    }
}
```
işlevi, addBooking dizini kullanarak seçili kabini alır. İşlev daha sonra ve cabin.pricekullanarak cabin.name yeni booking bir nesne oluşturur. Ardından diziye bookings eklerizbooking.
Açıklamadan booking-form sonra TODO: Add booking-form aşağıdaki kodu ekleyerek bileşeni kullanın:
```
<booking-form @booking-created="addBooking" :cabins="cruise.cabins"></booking-form>
```
İşlevi addBookingbooking-created olaya bağlar ve görüntülenmek üzere kabin listesini geçiririz.

Kabin türünü görüntüleme

Şimdi şablonu rezervasyonlarımız için bilgileri görüntüleyecek şekilde değiştirelim. Son alıştırmada gösterdiğimiz "Örnek" rezervasyon iletisi yerine her rezervasyon için kabin türünü görüntüleyeceğiz.

src/components/BookingList.vue dosyasını açın.

öğesinin <template> içinde, div içindeki alan adını olarak booking.namebooking.cabindeğiştirin:

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

Sayfayı test etme

Tüm kod eklendikten sonra sayfayı test edelim!

Dosya>Tümünü kaydet'i seçerek tüm dosyaları kaydedin.
http://localhost:8080 Sayfasına gidin ve sayfayı yenileyin.
Açılan listeden bir kabin seçin ve düğmeyi seçin.

Yeni rezervasyonunuz görüntülenir.

Şimdi özel olay içeren bir bileşen oluşturdunuz ve çağırdınız!

Devam et