Şimdi gelelim şu component’ler arasındaki iletişime. Özellikle de Vue.js gibi modern framework’lerde bu işler bazen biraz kafa karıştırıcı olabiliyor, ne yalan söyleyeyim. Hani böyle sanki sihirbazlık yapıyorsun da bir anda her şey yerli yerine oturuyor ya, işte o anları yakalamak önemli. Özellikle child component’ten parent component’e bir şeyler aktarmak istediğimizde, o aradaki köprüyü kurmak gerekiyor. İşte bu noktada custom events devreye giriyor, tam da ihtiyacımız olan şey! 🙂
Daha önce de dediğim gibi, bu component iletişimi olayı ilk başta biraz karmaşık görünebilir. Hele ki backend tarafında C# ile REST API geliştirirken, ön yüzde Vue.js gibi dinamik bir yapıyla uğraşırken, aradaki senkronizasyonu sağlamak tam bir sanat aslında. Hani böyle bir puzzle gibi düşünün, her parça yerine oturduğunda tadından yenmez bir bütün oluşuyor. İşte bu yazıda, Vue.js’teki custom event’ler ile child’dan parent’a nasıl temiz ve anlaşılır bir şekilde veri aktarabileceğinizi anlatacağım. Hatta bunu C# tarafında bir API ile nasıl entegre edebileceğimize de şöyle bir değineceğiz.
Şimdi öncelikle Vue.js tarafında işler nasıl yürüyor ona bir bakalım. Normalde parent’tan child’a veri aktarmak için props kullanıyoruz, bu malum. Ama iş child’dan parent’a bir şeyler göndermeye geldiğinde, props tek başına yetmiyor. İşte tam burada custom events bizim kurtarıcımız oluyor. Vue’nun kendi event sistemiyle konuşarak, child’dan parent’a istediğimiz bilgiyi push edebiliyoruz. Bu arada, bu olayı kendi programımda da defalarca kullandım ve gerçekten işe yarayan bir yöntem, bana göre.
Peki, bu custom event’leri nasıl kullanacağız? En basit haliyle, child component’te bir metot içinde `$emit` fonksiyonunu çağırıyoruz. Bu fonksiyon ilk argüman olarak göndermek istediğimiz event’in adını alıyor, ikinci ve sonraki argümanlar ise bu event ile birlikte gönderilecek veriler oluyor. Mesela, bir butona tıklandığında bir veri göndermek istiyorsak, o tıklama olayına bağlı bir fonksiyon yazıp içinde `$emit(‘veriGonder’, gonderilecekVeri)` gibi bir şey kullanabiliyoruz. Bu kadar basit.
Şimdi, bu olayı bir örnekle açıklayalım. Diyelim ki bir kullanıcı profili oluşturan bir formumuz var. Bu form child component’imiz olsun. Form doldurulduktan sonra, kaydedilsin diye bu bilgileri parent component’e göndermek istiyoruz. Parent component ise bu bilgileri alıp bir API’ye gönderecek mesela. İlk başta şöyle bir şey düşünebiliriz:
// Child Component (UserProfileForm.vue)
Şu şekilde bir template’imiz var:
<template>
<div>
<input type=\”text\” v-model=\”userName\” placeholder=\”Kullanıcı Adı\” />
<input type=\”email\” v-model=\”userEmail\” placeholder=\”E-posta\” />
<button @click=\”kaydet\”>Kaydet</button>
</div>
</template>
Ve script kısmında:
<script>
export default {
data() {
return {
userName: ”,
userEmail: ”
};
},
methods: {
kaydet() {
const userData = { name: this.userName, email: this.userEmail };
// İşte burada custom event’i tetikliyoruz
this.$emit(‘kullaniciKaydedildi’, userData);
}
}
}
</script>
Bu child component’te `kaydet` metoduna tıkladığımızda, `kullaniciKaydedildi` adında bir event tetikleniyor ve içine de kullanıcının adı ve e-postası bir obje olarak gönderiliyor. Ne güzel değil mi?
Şimdi gelelim bu eventi parent component’te nasıl yakalayacağımıza. Parent component’imiz ise şöyle görünecek:
// Parent Component (App.vue)
<template>
<div>
<h1>Kullanıcı Kayıt Ekranı</h1>
<UserProfileForm @kullaniciKaydedildi=\”kullaniciyiKaydet\” />
<p v-if=\”kaydedilenKullanici\”>Kaydedilen: {{ kaydedilenKullanici.name }} – {{ kaydedilenKullanici.email }}</p>
</div>
</template>
<script>
import UserProfileForm from ‘./components/UserProfileForm.vue’;
export default {
components: {
UserProfileForm
},
data() {
return {
kaydedilenKullanici: null
};
},
methods: {
kullaniciyiKaydet(userData) {
console.log(‘Parent: Kullanıcı kaydedildi!’, userData);
this.kaydedilenKullanici = userData;
// Buraya C# API’sine veri gönderme işlemi gelir.
// Mesela fetch veya axios ile bir POST isteği yapabilirsiniz.
// Örnek: this.sendToApi(userData);
}
// sendToApi(data) { … } // Buraya API çağrısı metodu gelecek
}
}
</script>
Burada dikkat etmemiz gereken nokta, `UserProfileForm` component’ini kullanırken `@kullaniciKaydedildi=”kullaniciyiKaydet”` şeklinde bir event dinleyicisi eklememiz. Bu, child component’ten `kullaniciKaydedildi` eventi tetiklendiğinde, parent’taki `kullaniciyiKaydet` metodunun çalışmasını sağlıyor. Ve bu metodun içine de child’dan gelen `userData` objesi otomatik olarak parametre olarak geliyor. İşte bu kadar basit.
Bu arada, bu olay gerçekten de çok pratik. Hani böyle ilk duyduğunda biraz göz korkutucu gelebilir ama birkaç denemeden sonra çorap söküğü gibi geliyor. Aslında olay tamamen event-driven bir yapı kurmak. Bir şey olduğunda haber ver, diğerleri de ona göre tepki versin.
Şimdi gelelim işin C# tarafına. Diyelim ki ön yüzde Vue.js ile topladığımız kullanıcı bilgilerini bir ASP.NET Core Web API’sine göndereceğiz. Bu API, gelen veriyi alıp veritabanına kaydedecek. Bu durumda child component’ten gelen `userData` objesini alıp, bunu bir C# DTO (Data Transfer Object) objesine çevirip, PostgreSQL veritabanına kaydetmemiz gerekiyor. Bu arada PostgreSQL konusunda Dapper ORM’i kullanmak işleri çok hızlandırır, bana göre.
Öncelikle bir DTO tanımlayalım:
// DTO (KullaniciDto.cs)
public class KullaniciDto { public string Name { get; set; } public string Email { get; set; } }Sonra da controller’da bu DTO’yu kabul eden bir POST metodu yazalım:
// Controller (KullaniciController.cs)
[Route("api/[controller]")] [ApiController] public class KullaniciController : ControllerBase { private readonly string _connectionString = "Server=localhost;Database=BenimDb;User Id=postgres;Password=sifre;"; // BURAYI KENDİ VERİTABANI BİLGİLERİNİZLE DEĞİŞTİRİN! [HttpPost] public async Task PostKullanici([FromBody] KullaniciDto kullanici) { if (kullanici == null) { return BadRequest("Geçersiz kullanıcı bilgisi."); }
try { using (var connection = new NpgsqlConnection(_connectionString)) { connection.Open(); // Buraya Dapper ile INSERT sorgusu gelecek // Örnek: // await connection.ExecuteAsync("INSERT INTO Kullanicilar (Name, Email) VALUES (@Name, @Email)", kullanici); // Basitlik adına şimdilik sadece başarılı mesajı dönüyorum. Console.WriteLine($"Kullanıcı kaydedildi: {kullanici.Name}, {kullanici.Email}"); } return Ok(new { message = "Kullanıcı başarıyla kaydedildi." }); } catch (Exception ex) { // Gerçek projede loglama yapılmalı! return StatusCode(500, $"Bir hata oluştu: {ex.Message}"); } } }
Bu controller metodu, Vue.js’ten gelen JSON veriyi `KullaniciDto` objesine otomatik olarak map edecek. Sonrasında da veritabanına kaydetme işlemini yapabiliriz. Gerçi şimdilik sadece konsola yazdırıyorum ama siz buraya Dapper ile gerçek bir `INSERT` sorgusu ekleyebilirsiniz. Hani böyle ilk başta biraz karmaşık görünse de, aslında mantık basit. Bir yerden bir yere veri aktarımı.
Bu arada, bu entegrasyonun temelinde yatan şey, aslında Vue.js’in `$emit` ile olayları tetiklemesi ve C# tarafında da bu olayları dinleyen (HTTP POST isteği ile) bir API endpoint’i olması. Tamamen birbiriyle konuşan iki farklı teknoloji. Ne güzel değil mi?
Sonuç olarak, child component’ten parent component’e veri aktarımı için custom event’ler harika bir çözüm sunuyor. Vue.js’in `$emit` fonksiyonu ile bu işi kolayca halledip, ardından bu veriyi backend’deki C# API’sine gönderebilirsiniz. Bu sayede, uygulamanızın farklı katmanları birbiriyle akıcı bir şekilde iletişim kurabilir. Zaten amacımız da bu değil mi, uygulamayı modüler ve yönetilebilir kılmak?
Eğer daha fazla detay isterseniz, Vue.js custom events ile ilgili resmi dökümantasyona bakabilirsiniz. C# tarafında Dapper ile PostgreSQL kullanımı hakkında da Dapper’ın GitHub sayfasına göz atabilirsiniz. Bu arada, bu konuyu anlatan güzel YouTube videoları da var, buradan aratarak bulabilirsiniz.