Vue.JS Componentler Arası Event Aktarımı

Vue.js'de bileşenler arası olay iletişimi, genellikle ebeveyn bileşenin çocuk bileşene bir olay tetikletmesi ve çocuk bileşenin bu olayı dinlemesi şeklinde gerçekleştirilir. İşte bu sürecin nasıl uygulandığına dair bir örnek:

1. Ebeveyn Bileşen (Parent Component): Ebeveyn bileşen, bir olayı tetikleyen bileşendir. Tetiklenen olay, çocuk bileşenin dinleyeceği bir olaydır.

   
   
   
   <!-- ParentComponent.vue -->
   <template>
     <div>
       <ChildComponent @custom-event="handleCustomEvent" />
     </div>
   </template>
   
   <script>
   import ChildComponent from './ChildComponent.vue';
   
   export default {
     components: {
       ChildComponent
     },
     methods: {
       handleCustomEvent(data) {
         console.log('Çocuk bileşen tarafından tetiklenen özel olay. Veri:', data);
       }
     }
   }
   </script>
   
   
   
   

2. Çocuk Bileşen (Child Component): Çocuk bileşen, ebeveyn bileşenden gelen olayı dinleyen bileşendir. Dinlenen olay, ebeveyn bileşen tarafından tetiklenen özel bir olaydır.

   
   
   
   <!-- ChildComponent.vue -->
   <template>
     <div>
       <button @click="triggerEvent">Özel Olayı Tetikle</button>
     </div>
   </template>
   
   <script>
   export default {
     methods: {
       triggerEvent() {
         this.$emit('custom-event', 'Bir veri');
       }
     }
   }
   </script>
   
   
   
   

Bu örnekte, ChildComponent adında bir bileşen bulunuyor ve bu bileşen bir düğme içeriyor. Düğmeye tıklandığında, triggerEvent adlı bir yöntem çağrılır ve bu yöntem this.$emit yöntemi ile 'custom-event' adında bir olayı tetikler. Tetiklenen olay, bu bileşeni kullanan ebeveyn bileşen tarafından dinlenecektir. Ebeveyn bileşeninde bu olaya bir dinleyici ekleyerek (örneğin, @custom-event="handleCustomEvent"), çocuk bileşenin tetiklediği olayı yakalayabiliriz.

Bu şekilde, Vue.js bileşenler arası iletişim sağlayabilir ve bileşenler arasında veri aktarımını yönetebiliriz.