Vue Js ile $Emit Kullanımı (Alt Componentten Üst Componente Veri Taşıma)

Merhabalar Vuejs ile component geliştiriken bazen alt componentlerden üst componentlere veri taşımak durumunda kalabiliriz, Vuejs bize bunun için “$emit” adlı özel bir fonksiyonla beraber yapmamıza olanak sağlamaktadır.

Daha iyi anlaşılması için girilen iki sayıyı toplayıp sonucu üst componentte yazdıran bir uygulama yazalım.

Proje Oluşturma

vue create emit-app

Projeyi oluşturduktan sonra src/components/AltComponent.vue isimli dosyamızı oluşturalım.

<template>
<div>
<p>Alt Component</p>
<p>Sayı 1</p>
<input type="text" v-model="sayi1">
<p>Sayı 2</p>
<input type="text" v-model="sayi2">
<button @click="topla()">Üst'e Gönder</button>
</div>
</template>
<script>
export default {
name: "AltComponent",
data() {
return {
sayi1: 0,
sayi2: 0,
};
},
methods: {
topla() {
let sonuc = +this.sayi1 + +this.sayi2;
this.$emit("toplamasonucu", sonuc);
}
}
};
</script>

Tanımlamış olduğumuz componente kullanıcı tarafından girilen iki sayıyı butona tıklayınca toplayıp çağırılmış olduğu bir üst componente “sonuc” değerini “toplamasonucu” şeklinde gönderiyoruz.

Şimdi src/App.vue dosyamızda oluşturmuş olduğumuz componenti kullanalım.

<template>
<div id="app">
<alt-component @toplamasonucu="gelen($event)"/>
Üst Componente Gelen Değer{{hesaplama}}
</div>
</template>
<script>
import AltComponent from "./components/AltComponent.vue";
export default {
name: "App",
data() {
return {
hesaplama: 0
};
},
methods: {
gelen(sonuc) {
this.hesaplama = sonuc;
}
},
components: {
AltComponent
}
};
</script>

Componentimizi import ettikten sonra alt component’de dışarıya “toplamasonucu adı ile $emit” ettiğimiz değeri “@” işaretini kullanarak yakalıyoruz içerisinde gelen “$event” bizim alt component’den dışarıya gönderdeğimiz ikinci parametre değeri olan toplama sonucunun değeridir.

Gelen değeri üst component’deki sonuc değişkeninin içerisine aktarıp üst component üzerinde gösterebilir yada kullanabiliriz.

Codesandbox:https://codesandbox.io/s/optimistic-ride-oyg2p?file=/src/App.vue:0-642

Herkese İyi Çalışmalar Dilerim. :)