#vueogreniyoruz: Event Emitter Kullanımı
Merhaba Arkadaşlar,
İki adet çok başlıklı makaleden sonra sırada tek bir konuyu işleyeceğimiz emitter var. Event emitter, uygulama geliştirirken karşımıza fazlasıyla çıkabilecek bir durumu kapsıyor. Vuejs ile geliştirdiğimiz projelerde genelde sayfadaki tüm modülleri olabilecek en küçük parçalarda birbirinden ayrı sayfalar olarak hazırlarız. Hazırladığımız tüm modüller her sayfanın içerisinde kullanılabilir durumda olmalıdır. Şimdiye kadar yaptığımız uygulamalara baktığımızda bir component içerisinde örneğin listeleme işi yapan bir modül hazırladıysak buna ait tüm javascript’leri de içerisinde yazdık. Çağırıldığı sayfada özel bir durumun olabilmesi ihtimaline göre hareket etmedik. Ama bir component’ı çağırdığımız 3 farklı sayfada o component’a ait javascript’lerin farklı çalışması gerekebilir. İşte burada devreye Event Emitter giriyor. Component içerisinde yazdığımız bir fonksiyonda istediğimiz isimde bir ‘$emit’ oluşturuyoruz. Çağırdığımız tüm sayfalarda ilgili işlem yapıldığında $emit için verdiğimiz ismi kullanarak çalışması gereken komutları özelleştirebiliyoruz.
Biraz örnek üzerinden anlatıp hem daha anlaşılır olmasını sağlayalım hem de yapacağımız uygulamanın nasıl olacağını düşünmüş olalım. Örneğimizde bir adet arama formu hazırlayacağız. Bu form aracılığıyla bir api’ye sorgu gönderip gelen cevabı sayfada konsola yazdıracağız. Ama kullandığımız arama formunu ‘kullanıcılar, yazılar, yorumlar’ isimli sayfalara ekleyeceğiz ve her birinin api’den istediği cevap farklı olacaktır. Component içerisinde oluşturacağımız $emit ile her sayfada kendi arama formunu oluşturup kendi doğru sonuçlarını sayfaya eklettirebileceğiz.
İlk olarak components klasörü altına SearchForm.vue isimli sayfayı oluşturalım. Css kısmını anlatmama gerek olmadığı için burayı hızlı geçiyorum. Sayfanın görünümünü şu şekilde hazırlayabiliriz:
<template>
<div class="search-parent-selector">
<div class="search-child-selector">
<div class="search-form">
<input type="text" class="form-input" />
<button class="form-button">ARA</button>
</div>
</div>
</div>
</template>
<script>
export default {
}
</script>
<style lang="scss">
.search {
&-parent-selector {
display: inline-block;
width: 100%;
text-align: center;
}
&-child-selector {
display: inline-block;
width: 600px;
}
&-form {
>* {
float: left;
}
.form-input {
width: 65%;
height: 45px;
border: 1px solid #dddddd;
border-radius: 4px;
padding: 0 10px;
outline: none;
}
.form-button {
float: right;
width: 30%;
height: 47px;
border: none;
background-color: #27ae60;
color: #ffffff;
border-radius: 4px;
outline: none;
cursor: pointer;
}
}
}
</style>
SearchForm.vue component’ını App.vue sayfasına import ettiğimizde formumuzun stillendirilmiş halini görebiliriz. Devamında yapacağımız tüm işlemler emitter’ın çalışması için olacaktır.
Formumuzda bulunan input’a v-model ekleyerek başlayalım. Eklediğimiz v-model , input içerisine girilen tüm karakterlerin anlık olarak elimizde tutulabilmesini sağlayacaktır. ‘query’ isminde v-model ekleyelim:
<input type="text" class="form-input" v-model="query" />
Daha sonra data fonksiyonu içerisinde boş bir string olarak query’i tanımlayalım:
export default {
data () {
return {
query: ''
}
}
}
Chrome’dan kontrol ederken vue devtools’u açtığımızda input’a girdiğimiz her karakterin query modelinde de güncellendiğini görebiliriz.
Methods altına bir adet fonksiyon ekleyeceğiz. İçerisinde bu fonksiyonun başka bir yerden kullanılabileceğini, kullanılırken kullanılması gereken ismi ve ona gönderebileceğimiz verinin ne olacağını belirteceğiz. Ekleyelim ve konuşmaya devam edelim:
methods: {
triggerSearch () {
this.$emit('searchQuery', this.query)
}
}
Eklediğimiz fonksiyon sonrasında import ettiğimiz tüm sayfalardan ‘searchQuery’ adı ile bu fonksiyonumuzu çağırabileceğiz. SearchForm.vue sayfasında son olarak ARA butonunun onClick özelliğine triggerSearch() fonksiyonunu ekleyip App.vue sayfasına geçelim:
<button class="form-button" @click="triggerSearch()">ARA</button>
App.vue sayfasında SearchForm’u template içerisinde çağırdığımız yerde v-on attribute’u ekliyoruz ve searchQuery parametresi gerçekleştiğinde bu sayfada çalışmasını istediğimiz fonksiyon ismini veriyoruz:
<search-form v-on:searchQuery="handleSearch" />
Eklediğimiz bu özelliğe göre ARA butonuna tıklandığında sayfamızda bulunan handleSearch isimli fonksiyon çalışacaktır. Methods altına handleSearch fonksiyonunu ekleyelim:
methods: {
handleSearch (q) {
alert(q)
}
}
Sayfayı çalıştırıp input’a isteğimize göre bir değer girelim. Ben ‘YAŞASIN BİLGİSAYACİ.ORG’ yazdım. Size de öneririm 🙂 Sonrasında ARA butonuna tıklayalım. Bir alert mesajı içerisinde input’a girdiğimiz değerleri göreceğiz. Çünkü SearchForm.vue içerisindeki triggerSearch fonksiyonunda $emit tanımlarken parametre olarak ‘query’ değişkenini göndermiştik. query değişkeni de input’a v-model ile eklendiği için direkt olarak input içeriğini taşıyor. Bu parametre sayesinde input içerisindeki değeri alabiliyoruz.
Makalenin başında bir arama formu oluşturacağımızı ve kullanıcılar, yazılar, yorumlar sayfalarına ekleyip her birinde farklı içerik çağıracağımızı yazmıştım. Bu yaptığımız event emitter işlemi ile SearchForm.vue isimli component’ı istediğimiz sayfaya ekleyip input içeriğine girilen değeri farklı farklı api’lere sorgu olarak gönderebiliriz. Sadece alert mesajı ile bırakmış olmamak için jsonplaceholder içerisinden tek bir kullanıcı data’sını çekip konsola yazdırarak yazıyı sonlandırıyorum. handleSearch() fonksiyonunu aşağıdaki şekilde güncelliyoruz ve browser üzerinden sayfayı açtığımızda input’a 1’den 10’a kadar bir rakam girip ARA butonuna tıklıyoruz. konsolda o id’ye sahip kullanıcının bilgilerini göreceğiz.
handleSearch (q) {
alert(q)
fetch(`https://jsonplaceholder.typicode.com/users/${q}`)
.then((res) => { return res.json() })
.then((res) => { console.log(res) })
}
Not: Bu ders içeriğinde kullanılan dosyaları görüntülemek için tıklayınız
Tüm Yorumlar