VueJS 2 ile birlikte gelen yeniliklerin yanı sıra hali hazırdaki bir takım özellikler de kaldırıldı (depracated) ya da kullanım şekli değiştirildi diyebiliriz. Yeni versiondan etkilenen özelliklerden biri de Custom Event’lerin kullanımlarıdır.

Şöyleki; VueJS version 1’de parent instance’tan child component’te kaydedilmiş bir event yada event’leri $broadcast edebiliyorduk diğer bir söylemle tetikleyebiliyorduk. Şuan da version 2’de bu özellik resmi olarak kaldırılmış durumda, yani parent’tan child componentteki bir event’leri çalıştıramıyoruz.

Artık sadece child component’ten parent instance’taki event’leri çalıştırabiliyoruz. Burada yine bir kullanım dğeişikliği söz konusu, version 1’de $dispatch ile child component’ten parent’taki bir event tetikliyorken, version 2’de bu süreç artık tamamen event directive’leri üzerinden ilerliyor.

Parent-Child event yönetimi ile ilgili dökümanda bulunan ayrıntı:

You cannot use $on to listen to events emitted by children. You must use v-on directly in the template, as in the example below.

Örnek:

1
2
3
<div id="example">
<products v-on:alert="alerts"></products>
</div>

Products Component:

1
2
3
4
5
6
7
Vue.component('products', {
methods: {
getProducts() {
this.$emit('alert', 'Ürün bulunamadı');
}
}
});

Product List Component (parent):

1
2
3
4
5
6
7
8
9
10
new Vue({
methods: {
alerts(message) {
// Ürün bulunamadı
console.log(message);
}
}
}).$mount('example');

Sonuç itibariyle

Üzerinde çalıştığım projede parent instance’tan child component’teki bir event’i tetiklemem gerektiğinden bunu farklı bir yöntemle çözdüm. One-way binding yapıp child component’te tanımladığım prop’u VueJS watch ile izleyerek bir nevi event gibi kullanmış oldum.

Yöntem çok doğru olmasada version 2’de bu durumu çözecek her hangi bir püf nokta bulamadım. Eğer bu durumu çözecek bir fikri olan birileri varsa yorumda bunu belirtebilirse beni ve ihtyacı olanları ihya edecektir.