Vue.JS Component Arası Veri Aktarımı

Vue.js'de bileşenler arası veri iletişimi için birkaç farklı yöntem bulunmaktadır. İşte bu yöntemlerden bazıları:

1. Props Kullanımı: Bileşenler arasında veri aktarımı için en yaygın kullanılan yöntem props kullanmaktır. Bir bileşenin diğerine veri geçirmek için, bir bileşene props adında bir özellik tanımlanır ve veri bu özellik aracılığıyla aktarılır.

   Örneğin, ana bileşeninizden alt bileşene bir değer geçirmek istiyorsanız:

   
   
   
   
   <!-- App.vue -->
   <template>
     <div>
       <ChildComponent :message="parentMessage" />
     </div>
   </template>
   
   <script>
   
   import ChildComponent from './ChildComponent.vue';
   
   export default {
     components: {
       ChildComponent
     },
     data(
   ) {
       return {
         parentMessage: 'Bu bir mesajdır'
       }
     }
   }
   
   </script>
   
   
   
   

   Ardından, alt bileşeninizde bu değeri almak için props kullanabilirsiniz:

   
   
   
   
   <!-- ChildComponent.vue -->
   <template>
     <div>
       <p>{{ message }}</p>
     </div>
   </template>
   
   <script>
   
   export default {
     props: ['message']
   }
   
   </script>
   
   
   
   

2. $emit ve Event Listener Kullanımı: Bir bileşenin diğerine değer iletmek yerine, bir olay (event) tetikleyerek iletişim sağlamak istiyorsanız $emit ve event listener kullanabilirsiniz. Bu yöntem, genellikle ebeveyn bileşenin alt bileşene talimat vermesi gerektiğinde kullanılır.

   Örneğin, alt bileşeninizin bir düğmeye tıklanınca bir olay tetiklemesini istiyorsanız:

   
   
   
   
   <!-- ChildComponent.vue -->
   <template>
     <button @click="emitEvent">Olayı Tetikle</button>
   </template>
   
   <script>
   
   export default {
     methods: {
       emitEvent(
   ) {
         this.$emit('custom-event', 'Veri')
       }
     }
   }
   
   </script>
   
   
   
   

   Ardından, ana bileşeninizde bu olayı dinleyebilirsiniz:

   
   
   
   
   <!-- App.vue -->
   <template>
     <div>
       <ChildComponent @custom-event="handleEvent" />
     </div>
   </template>
   
   <script>
   
   import ChildComponent from './ChildComponent.vue';
   
   export default {
     components: {
       ChildComponent
     },
     methods: {
       handleEvent(data) {
         console.log('Olay Tetiklendi, Veri:', data)
       }
     }
   }
   
   </script>
   
   
   
   

3. Vuex Kullanımı: Vue.js uygulamalarında global durum yönetimi için Vuex kütüphanesi kullanılabilir. Vuex, uygulamanızın tüm bileşenleri arasında merkezi bir durum depolama alanı sağlar. Böylece, bileşenler arasında veri aktarımı ve senkronizasyonu kolaylaşır.

   Bu yöntem, uygulamanızın boyutu ve karmaşıklığı arttıkça ve bileşenler arası iletişim daha karmaşık hale geldikçe özellikle faydalı olabilir.