Bileşene prop ekleme

6 dakika

Geçerli rezervasyon listesini görüntülemek için bir bileşen oluşturarak uygulamamızı oluşturmaya devam edelim. Kullanıcının rezervasyon eklemek için kullanabileceği bir form ekleyeceksiniz, bu nedenle şimdilik statik bir dizi oluşturun.

Bileşeni oluşturma

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

Visual Studio Code'da src/components içinde BookingList.vue adlı bir dosya oluşturun.
BookingList.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.

Props ve hesaplanan değeri kaydetme

Rezervasyonlar hakkında bir dizi bilgi bekliyoruz, bu nedenle prop'umuzu türü Arrayolarak bildireceğiz. Bir bileşen oluşturduğunuz için, sizin için değerleri otomatik olarak hesaplamak için hesaplanan özelliklerden de yararlanabilirsiniz. Toplam fiyatı eklemek ve kullanabileceğiniz bir görüntüleme değeri döndürmek için hesaplanan bir özellik ekleyeceksiniz.

Henüz açık değilse src/components/BookingList.vue dosyasını açın.
için küme ayraçlarının ({ }) içine ve computed özelliği adlı bookings bir prop oluşturmak için export defaultaşağıdaki kodu ekleyin:
```
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');
    }
}
```
totalDisplaybookingsthisbileşenimizin bir parçası olarak bildirilen verilere veya diğer özelliklere nasıl erişebildiğimize dikkat edin. içinde listelenen bookingstüm fiyatların toplamını hesaplamak ve bir dize görüntüsü oluşturmak için kodu oluştururuz.

Görüntü için şablonu ekleme

Rezervasyonlarımızın bilgilerini görüntülemek için şablonu ekleyelim. Daha önce oluşturduğumuz tüm rezervasyonları ve totalDisplay hesaplanan özelliği döngüye almak için kullanacaksınızv-for.

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

öğesinin <template> içine aşağıdaki HTML'yi ekleyin:

<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>

Kodumuz ile v-for tüm rezervasyonlarda yinelenir ve görüntüler cabin. Ardından tüm rezervasyonların toplam maliyetini görüntülemek için ararız totalDisplay .

Bileşeni ana sayfaya ekleme

Oluşturduğumuz bileşeni kullanalım ve rezervasyon listesini geçirelim.

src/components/Host.vue dosyasını açın.
Açılış <script> etiketinin altına ve önüne export defaultyeni bir satır ekleyin.
Bileşeni içeri aktarmak BookingList için aşağıdaki kodu (açıklama dahil) ekleyin:
```
import BookingList from './BookingList.vue';
// TODO: Register next component
```
Açıklamanın altına TODO: Add components aşağıdaki kodu (açıklama dahil) ekleyerek bileşeni kaydedin:
```
components: {
    BookingList,
    // TODO: Add next component

},
```
Önemli

gelecekte daha fazla değer ekleyebileceğimiz için iki virgül gereklidir.

Bileşeni kullanma

Bileşen kayıtlı olduğunda, bunu sayfamızda çağıralım. Sayfadaki rezervasyon listesini görmek için daha önce oluşturduğumuz diziyi kullanacağız bookings .

Henüz açık değilse src/components/Host.vue dosyasını açın.
Açıklamanın TODO: Add booking-list altına aşağıdaki kodu ekleyerek bileşeni kullanın booking-list :
```
<booking-list :bookings="bookings"></booking-list>
```

Sayfayı test etme

Bileşen kaydedildi ve yapılandırıldı, şimdi sayfayı test edelim!

Dosya>Tümünü kaydet'i seçerek tüm dosyaları kaydedin.
ile http://localhost:8080 tarayıcı pencerenize dönün ve sayfayı yenileyin.

Sayfada artık örnek rezervasyon görüntülenir.

Tebrikler! Props ile bir bileşen oluşturdunuz.

Devam et