Vue.JS Component Kullanımı

Vue.js'de bir bileşen (component) kullanmak için şu adımları izleyebilirsiniz:

1. Bileşen Oluşturma: Öncelikle, kullanmak istediğiniz bileşeni oluşturmalısınız. Bir bileşen, bir Vue bileşeni olarak tanımlanır ve genellikle .vue uzantılı bir dosyada saklanır. Bir bileşen dosyası, template, script ve style bölümlerini içerebilir. Örneğin, MyComponent.vue adında bir bileşen dosyası oluşturabilirsiniz:

    
     <!-- MyComponent.vue --> <template> <div> <h1>{{ title }}</h1> <p>{{ message }}</p> </div> </template> <script>  export default { data( ) { return { title: 'Merhaba', message: 'Bu bir Vue bileşenidir.' } } }  </script> <style scoped>  /* Bileşen için stil tanımları */  </style>  
    
    

   Canlı Dene Kopyala

2. Bileşen Kullanımı: Oluşturduğunuz bileşeni kullanmak için, Vue.js bileşenlerini kullanacağınız yerde bileşen adını kullanabilirsiniz. Örneğin, bir Ana Vue bileşeni içinde veya başka bir bileşen içinde kullanabilirsiniz:

    
     <!-- App.vue veya başka bir bileşen --> <template> <div> <h1>Vue.js Bileşen Kullanımı</h1> <MyComponent /> </div> </template> <script>  import MyComponent from './MyComponent.vue'; // Bileşen import ediliyor export default { components: { MyComponent // Kullanılacak bileşenlerin listesi burada tanımlanır } }  </script> <style>  /* Bileşenlerin kullanıldığı yerdeki stil tanımları */  </style>  
    
    

   Canlı Dene Kopyala

   Bu örnekte, MyComponent adında oluşturduğumuz bileşeni, components seçeneği ile içinde bulunduğu bileşene ekledik ve ardından <MyComponent /> şeklinde kullanabiliriz.

3. Bileşen Parametreleri: Bileşenler arasında veri iletmek için bileşenlere parametreler geçirebilirsiniz. Bunun için props özelliğini kullanabilirsiniz. Örneğin, MyComponent bileşenine bir başlık ve mesaj geçirmek istiyorsak:

    
     <!-- App.vue veya başka bir bileşen --> <template> <div> <h1>Vue.js Bileşen Kullanımı</h1> <MyComponent title="Başlık" message="Mesaj" /> </div> </template> <script>  import MyComponent from './MyComponent.vue'; export default { components: { MyComponent } }  </script> <style>  /* Bileşenlerin kullanıldığı yerdeki stil tanımları */  </style>  
    
    

   Canlı Dene Kopyala

   Ardından, MyComponent bileşeninde bu parametreleri props özelliği ile alabilirsiniz.

Vue.js bileşenleri, uygulamanızı modülerleştirmenin ve yeniden kullanılabilir bileşenler oluşturmanın güçlü bir yoludur. Bileşenler, projenizi daha okunaklı, sürdürülebilir ve genişletilebilir hale getirir.