#vueogreniyoruz: Component Oluşturma ve Kullanma

Merhaba Arkadaşlar,

Bu makalede projelerimizdeki en küçük yönetilebilir alanlar olan component’ları göreceğiz. Component’lar, içeriğinde standart vue template yapısını barındırır ve html, css ve javascript kodları ile birlikte sayfaya yüklenirler. Bir component’ın başka bir component’a veya layout’a aktarılabilmesi için ilgili sayfaya import edilmesi gerekmektedir. Biz de bu yazı içerisinde bir component’ı oluşturup başka bir sayfaya import etmeyi ve import edildiği sayfadan component içerisine parametre geçmeyi göreceğiz.

COMPONENT OLUŞTURMAK

Projemizde /src/components klasörü üzerinde sağ tık ‘New File’ seçeneğine tıklıyoruz. Dosya ismine ‘BasicComponent.vue’ yazıp yeni dosyayı oluşturuyoruz. Daha sonra component içerisine vue standartlarına uygun başlangıç kodlarını yazıyoruz:

<template>
    <div>

    </div>
</template>

<script>
    export default {
        
    }
</script>

<style lang="scss">

</style>

IMPORT İŞLEMLERİ

Yapacağımız çalışmanın ilk kısmında BasicComponent içerisinde bir paragraf yazacağız ve bunu App.vue sayfasında görüntüleyeceğiz. BasicComponent.vue template tag’leri arasındaki kod bloğunu şu şekilde düzenleyelim.

<template>
    <div class="component-wrapper">
        <p>
            Lorem ipsum, dolor sit amet consectetur adipisicing elit. Repellendus nisi temporibus alias ut quia cumque. Tempore voluptatibus distinctio eos accusamus blanditiis quia fugiat reiciendis a? Molestias nesciunt sed at nihil.
        </p>
    </div>
</template>

App.vue sayfasını açalım ve script tag’leri arasını şu şekilde güncelleyelim:

<script>
import BasicComponent from './components/BasicComponent.vue'
export default {
  components: {
    BasicComponent
  }
}
</script>

import ile başlayan satırda component’ı çağırdık, components kapsayıcısı içerisinde de adını yazarak bu sayfada BasicComponent’ın kullanılacağını belirttik. Template tag’leri arasında güncellemeyi yaparak sonucu görebiliriz:

<template>
  <div id="app">
    <basic-component />
  </div>
</template>

Component ile ilgili tag eklendikten sonra tarayıcıda sonucu görebiliriz.

Component’ı çağırırken basic ve component kelimeleri arasında “-” kullandık. Ama component’ı oluştururken veya import ederken saydamıza bu şekilde kullanacağımıza dair bir bildirimde bulunmamıştık. İlk gördüğümde anlam veremediğim bu özellik tanımlamalar sırasında component adında iki adet büyük harf var ise ikisini farklı kelimeler olarak algılayarak yazmamızı sağlıyor. Bu şekilde bir kullanım ile isimleri uzun olan component’lar daha anlaşılır bir hale geliyor. Eğer component adında tek bir kelime grubu olaydı şeklinde çağıracaktık.

VIEW İÇERİSİNDEN BIND İŞLEMLERİ

Buraya kadar yaptığımız çalışma bir önceki makalede kullanılan yapının benzeri biçiminde oldu. Şimdi view içerisinde component kullanımını dinamik hale getirecek başka bir çalışma yapacağız.
View içerisinde tanımlayacağımız dinamik bir değeri component içerisine göndereceğiz. Component’a geçilecek verilerin isimleri tamamen bizim isteklerimize göre şekillendirilebilir. Ben bu değeri ‘customText’ olarak belirliyorum.

App.vue template’ini aşağıdaki gibi güncelliyoruz.

<template>
  <div id="app">
    <basic-component customText="deneme" />
  </div>
</template>

Gönderdiğimiz dinamik değeri BasicComponent içerisinde ‘customText’ adında bir değer olarak yakalayacağız. Bunun için script tag’leri arasına ‘props’ kapsayıcısı ekleyip içerisine ‘customText’ tanımlıyoruz. Bu değerin string tipinde olması gerektiğini ve ilgili component’ın çalışması için bu değerin gönderiminin zorunlu(required) olduğunu yazıyoruz. BasicComponent içerisindeki script’imiz şu şekilde güncellenmelidir:

<script>
export default {
  props: {
    customText: { type: String, required: true }
  }
}
</script>

Daha sonra aynı sayfadaki template tag’leri içerisinde ‘lorem ipsum’ ile başlayan paragrafı silip artık elimizde bir değişken olarak var olan customText’i yazıyoruz. Çift süslü parantez arasına yazılması gerektiğini bir önceki makalede görmüştük. Component template’inin son hali:

<template>
    <div>
        <p>{{customText}}</p>
    </div>
</template>

Tarayıcıdan kontrol ettiğimizde view içerisinden geçtiğimiz değerin yazıldığını görebiliriz. Bu şekilde bir kullanım sayesinde içerisinde hiç içerik barındırmayan, yalnızca html yapısı ve stilleri olan component’lar oluşturup kullanıldığı sayfalardan dinamik değerler geçilebilir.

Not: Bu ders içeriğinde kullanılan dosyaları görüntülemek için tıklayınız