Vue.js : Componentler arası haberleşme

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

PlusClouds'da servis geliştirmek çok keyif verici ve tatmin edici bir aktivite. Yaşadığımız bu keyfi de sizinle paylaşmak ayrıca bizim için bir keyif. Bu sebepten her hangi bir konuda yazı yazmamızı veya neyi nasıl yaptığımızı öğrenmek isterseniz lütfen çekinmeyin ve bize ulaşın.

Ayrıca bizim Discord sunucumuza gelin!

Tüm veri merkezlerimizi

Orchestrator LEO ile
yönetiyoruz;