Vue.js Component Yapısı ve Componente Veri Göndermek

Merhabalar,

Component kavramı, hangi framework olursa olsun farketmeksizin frontend yazılım geliştirmesi için oldukça önemli bir kavramdır. Yani bir yerde frontend‘in OOP(Nesneye Yönelik Programlama)’ye açılan kapısı.

Eğer bir kod bloğunu birden fazla yerde kullanmak istiyorsak, gidip her yere aynı kodu yazmak yerine ( ki yazılımın en önemli amaçlarındandır-DRY — Don’t Repat Yourself!) Component oluşturup işlemi component içerisinde yapıp istediğimiz yerde çağırabiliyoruz.

Gelelim Vue.js’te componentin nasıl oluşturulduğuna!

Projenin düzeni ve kullanılabilirliği için src dosyasına component isimli bir dosya oluşturuyoruz. componentAdi.vue şeklinde amacına uygun bir isim ile bir sayfa oluşturarak componenti oluşturmuş oluyoruz.

Component Örneği

Tabii componenti nerede kullanmak istiyorsak orada import etmemiz gerekli. Burada componenti local veya global olarak 2 şekilde import etmek mümkün.

1- Global Component:

Componenti main.js sayfasında import ederek diğer her yerde sadece component ismini çağırarak kullanabiliriz.

main.js’te FilterNav componentinin global import örneği

2- Local Component

Bu yöntemde ise main.js sayfasında bir ekleme yapmadan direkt olarak componenti kullanmak istediğimiz sayfada import ediyoruz.

• Burada bilmemiz gereken nokta: global component kullandığımızda bir yük oluştururuz. Proje çalıştığı anda hepsi gereksiz yere render edilebilir. Bu yüzden her componenti global olarak import etmememiz önemlidir.

Componentlere Veri Gönderimi

Parent’tan Child’a Veri Gönderimi (props, slot)

• Veri olarak text göndermek istiyorsak props bizim anahtar kelimemiz olacak. app.vue dosyasından göndermek istediğimiz verileri props ile dizi şeklinde gönderebiliyoruz. alt component’ten ise {{…}} parantezleri içerisinde anahtar kelimeler ile alıp istediğimiz yerde kullanabiliyoruz.

App.js ‘ten gönderilen text ve text2 verileri

Alt component yani örnek Title.vue ‘da props ile alınan ve {{}} ile kullanılan veriler

• Ya text değil de örneğin HTML bilgilerini de göndermek istiyoruz diyelim. Bunun için de slot yapısı kullanıyoruz. Slot’u bir key ile ya da direkt<slot> tagi içerisinde kullanabiliriz.

Üst componentten gönderiler bir key’siz(h1) ve bir key’li(h3) verisi

Alt componentten slot ile html özellikleri ile alınan 2 veri

Ekrandaki çıktı.

Child’tan Parent’a Veri Gönderimi ($emit)

Bu sefer alt component’ten üst componente veri göndermek istiyoruz.Bunu da $emit ile gerçekleştiriyoruz.

Alt componentten $emit ile clean verisini gönderilir.

Üst yani app.vue componentinden $refs ile $emit’in gönderdiği clean komutu alıp işlem yapılır.

Böylece component yapısını ve kullanımını konusunu da tamamlamış olduk. Bir sonraki Vue.js Router yazısında görüşmek üzere! 👐

Kaynakça:

https://www.w3schools.com/vue/vue_v-for-comp.php

https://www.mustafacagri.com/vue-js-components-parentten-childe-veri-aktarimi