Bileşen (Component) Nedir ? Vue.js İle Nasıl Kullanılır ?
Öncelikle bileşen nedir, ne için kullanılır kısaca bundan bahsedelim. Bileşenler bir nevi kurtarıcılar da diyebiliriz :) Bileşenler yardımı ile birden fazla kez kullanmak istediğimiz kod parçamızı tek seferde yazarak birçok yer de kullanabiliriz. Açıklarken biraz hava da kalabilir fakat örnekler ile daha iyi anlayacağınızı düşünüyorum.
Bir örnek ile devam edelim. Herkesin karşısına çıktığını, dikkatini çektiğini ve daha kolay kavrayacağınızı düşündüğüm için bir web sitesi üzerinden örnek vermek istiyorum. Birçok web sitesinde dikkatinizi çekmiştir her sayfaya girdiğinizde sayfalarda bir banner kısmı olur üzerinde yazı yazan ve bir resimden oluşan arka planı olur. Her sayfa için tek tek css ve kod bloğu oluşturmak yerine bir bileşen oluşturulur ve her sayfa içerisinde bu bileşen çağırılır. Böylece hem kod tekrarının önüne geçmiş oluruz hem vakit kazanırız hem de daha temiz kod yazmış oluruz. En önemli nokta ise şu diyelim bir değişiklik yapmak istiyorsunuz bannerda tek tek tüm sayfalara gidip bu işlemi yapmaktansa tek bir component yardımıyla istediğiniz şekilde güncelleyebilirsiniz. Peki bu bileşenler birbiri ile nasıl iletişim kurar yani her bir sayfaya eklediğimiz bu bileşenleri sayfa bazında nasıl özelleştirebiliriz. Bunun için de props’lar kullanılır. Props’lar yardımıyla componentlere istediğimiz özellikte verileri ekleyip sayfa bazında özelleştirebiliriz. Daha açıklayıcı olması açısından küçük bir örnek üzerinden devam edelim. Öncelikle kullanacağımız banner componentini oluşturalım.
Banner componentimde bannerClass ile arka plan özelliklerimi, textClass ile yazımı, title ile başlıklarımı, desc ile eğer title altına eklemek istediğim bir açıklamam var ise onları ekliyorum.
Şimdi ana sayfamızda kullanacağımız kod bloğumuzu yazalım.
Bu kod bloğu ile oluşturduğumuz sayfamız aşağıdadır.
Bir de iletişim sayfası ekleyelim.
Yukarıda görüldüğü gibi içerik yazıları ve arka planı değişik aynı yapıda iki sayfa banner örneği vardır. Sadece arka planı veya içerik yazıları değil bir çok özelliğini banner bloğuna bağlayarak her sayfa için özelleştirebilirsiniz.
Component kullanmaya yeni başlayanlar için küçük bir örnek ile açıklamaya çalıştım. Umarım faydalı bir içerik olmuştur sizler için..
Görüş, öneri ve sorularınız için mail atabilirsiniz..Keyifli okumalar.. :)
