Vue.js ile bir uygulama geliştirirken, tüm parçaları ayrı bir component olarak ayırıyor, bunun üzerine bir yapı kuruyoruz. Bu bize hem daha düzenli bir yapı sunarken, hem de tekrar tekrar aynı kodu yazmamızı veya bir değişiklikte onlarca yerde aynı düzenlemeyi yapmamızı engelliyor.
Bu tabiki sadece Vue.js'e özel veya burada önerilen birşey değil ve bu konu ile ilgili olarak DRY (Don't Repeat Yourself) ismi verilen genel bir yazılım prensibi var. Bu prensip yazılımın en temel prensiplerinden biridir ve kod tekrarlarından sakınılması gerektiğini savunur. (The Pragmatic Programmer kitabında DRY olarak isimlendirilmiş ve genişçe açıklanmıştır.)
Bizde bu prensibe ve mantığa uyarak componentler oluşturarak ayağa kaldırdığımız projelerimizde, dinamik verilere sahibiz ve bunları ana componentten alt componentlere (parent to child), alt componentten ana componente (child to parent) ve alt seviyedeki componentler arası (child to child) taşımamız gerekiyor. Bu data taşıma işlemlerini nasıl yapacağımıza bakalım.
Parent - Child arası iletişim için :props
Parent component'ten child component'e veriyi aktarırken props yapısını kullanıyoruz. Props ile gönderdiğimiz veriyi child component'te, data içerisinde tanımladığımız bir değer gibi kullanabiliyoruz.
Parent Component
//Burada title değerine statik bir değer atıyoruz.
<child-component :title="item.Title />
//Burada child component içerisinde tanımladığımız title değerine, parent component'teki item içerisinde tanımladığımız Title değerini gönderiyoruz.
Karşılarken ise şu şekilde kullanabiliriz.
Child Component
Child - Parent arası iletişim için $emit
Parent'ten child'a props ile datayı aktarmıştık, burada da tam tersi bir işlem yapmamız gerekiyor ve veriyi yukarı doğru fırlatmamız gerekiyor. Bunun için de emit yapısını kullanıyoruz. Kısa bir örnek vermek gerekir ise this.$emit("result", item) şeklinde kullanabiliriz.
Yukarıdaki örnekten devam edersek şöyle bir sonucumuz olacak;
Child Component
Parent içerisinde bu emitleri yakalamak için @emitAdı veya v-on:emitAdı olarak kullanıyoruz.
Parent Component
Child - Child arası iletişim için event-bus
Burada parent - child arasındaki ilişki gibi direk bir ilişkimiz olmadığı için bir aracı kullanmamız gerekiyor ve biz burada eventbus nesnesini kullanıyoruz. Bu nesneyi herhangi bir dom elemanına bağlanmayan bir vue nesnesi olarak oluşturuyoruz ve bu nesneyi sadece veri iletirken kullanacağız. Tüm componentler buraya event yollayabilecekler ve burayı dinleyen tüm componentler gelen dataya göre aksiyon alabilecekler.
Burada öncelikle event-bus.js içerisine belirttiğimiz şekilde bir eventBus nesnesi ekleyeceğiz.
Daha sonra bunu kullanacağımız sayfalarda import etmemiz yeterli olacak. Şimdi sadece 2 component arası kullanacağımız için global'de tanımlamadık.
Şimdiki örneğimizde A componentindeki başlığı, B componentindeki butona basarak güncelleyelim.
Child A Component
Child B Component
Bu üstteki 3 yöntem ile componentler arasındaki data aktarımlarını yapabiliyoruz.
