Blog

Vue.js'nin inject özelliği, bir üst (parent) bileşenin değerlerini alt (child) bileşenlere iletmek için kullanılan bir mekanizmadır. Bu, bileşenler arasında veri veya fonksiyonları paylaşmak için kullanışlı bir yol sağlar.

inject özelliği genellikle bir bileşenin provide özelliği aracılığıyla sağladığı değerleri almak için kullanılır. provide özelliği, bir bileşenin altındaki tüm alt bileşenlere değerleri sağlamak için kullanılır.

İşte basit bir örnek:

  

      

          html
      
      

          
            
<!-- ParentComponent.vue -->
            
<template>
            
<div>
            
<child-component />
            
</div>
            
</template>
                
            
 <script>
            
            
import  ChildComponent   from './ChildComponent.vue';
    
            
export  default {
            
components: {
            
ChildComponent
      
            
},
        
            
provide() {
      
            
return {
            
message: 'Merhaba, bu değeri paylaşıyorum!'
        
            
};
  
            
}
  
            
};
  
            
            
</script>
          
      
  

  

      

          html
      
      

          
            
<!-- ChildComponent.vue -->
            
<template>
            
<div>
            
<p>{{ injectedMessage }}</p>
            
</div>
            
</template>
            
<script>
            
            
export  default {
            
inject: ['message'],
            
computed: {
            
injectedMessage() {
            
return  this.message;
            
}
            
}
            
};
            
            
</script>
          
      
  

Yukarıdaki örnekte, ParentComponent bileşeni, provide özelliği aracılığıyla message adlı bir değeri altındaki tüm alt bileşenlere sağlıyor. ChildComponent bileşeni ise inject özelliğini kullanarak bu değeri alıyor ve injectedMessage adlı bir computed property üzerinden kullanıyor.

Bu sayede ChildComponent, ParentComponent'tan gelen message değerine erişebilir ve bu değeri kullanabilir. Bu tür bir mekanizma, veri paylaşımını ve iletişimini kolaylaştırmak için kullanışlıdır.