Daha önceden Vue.js’te component oluşturma ve bu componentlerı kullanma konularına değinmiştim. Ancak, component statik olduğu için component’i çağırdığımız yerden herhangi bir veriyi aktarmamıştık. Şimdi ise veri aktarımını tek taraflı olarak parent -> child arasında yapacağız.
Sonraki aşamalardaysa child -> parent ve 2 child arasında veri aktarımını da yapacağız.
Vue.js Components: Props
Daha önceden paylaştığım Vue.Js Components başlıklı yazıda, componentlar hakkında detaylı bilgiler paylaşmıştım. Şimdi ise componentlara veri göndereceğiz ve bu verileri ekranda yazdıracağız.
Öncelikle yeni bir proje oluşturabilir ya da eski projelerimizi kullanabiliriz. Ben yine de sayfanın sonunda proje dosyalarını paylaşacağım.
Component Oluşturuyoruz
Haydi başlayalım… Components klasörüne gidiyoruz ve Bilesen.vue isminde bir dosya oluşturuyoruz. Dosyamız içerisine alt kısımdaki kodları yazıyoruz.
<template>
<div id="Bilesen">
<h1>{{baslik}}</h1>
<p>İsim: {{isim}}</p>
<p>Yaş: {{yas}}</p>
</div>
</template>
<script>
export default {
name: 'Bilesen',
props: ['isim', 'yas', 'baslik']
}
</script>
<style scoped>
#Bilesen {text-align:center;}
</style>Burada öncelikle standart olarak <template><div></div></template> ile vue dosyamızı oluşturuyoruz. <template> içerisine Vue’nun özelliği olarak div ya da başka bir kapsayıcı tag yazmamız gerekiyor. Div’in classına ya da id’sine isim vermek ise size kalmış bir şey.
props isminde bir aray oluşturuyoruz ve içerisine de App.vue’dan gelecek attribute’ları yazıyoruz. Burada karşıladığımız değişkenleri ise data içerisinde tanımlamış gibi {{ isim }} şeklinde kullanabileceğimizi bilmeniz gerekiyor.
Şimdi ise App.vue dosyasına gidiyor ve alt kısımdaki kodları yazıyoruz.
<template>
<div id="app">
<Bilesen baslik="Hoş Geldiniz" isim="Mustafa Çağrı Güven" yas="32" />
</div>
</template>
<script>
import Bilesen from './components/Bilesen.vue'
export default {
name: 'App',
components: {
Bilesen
}
}
</script>Sayfamızın çıktısı şu şekilde olacaktır:
Özet olarak App.vue’ya Bilesen.vue’yu import ettik. Bilesen ismindeki componentımızı ise şu şekilde çağırdık:
<Bilesen baslik="Hoş Geldiniz" isim="Mustafa Çağrı Güven" yas="32" />
Buradaki isim, yas, baslik gibi attributeları ise Bilesen.vue içerisinde props sayesinde yakaladık ve ekrana yazdırdık. Çok kolay değil mi? Ama sanki bir şeyler eksik gibi geliyor mu size de? Evet, bir şeyler eksik: slots! Haydi şimdi sadece text gönderiyoruz, peki ya HTML kodları gibi daha kompleks verileri nasıl göndereceğiz?
Vue.js Components: Slots
Bu defa yine aynı görüntüyü farklı bir yöntemle elde edeceğiz. Öncelikle Components klasörü içerisinde Bilesen2.vue isminde bir dosya oluşturuyoruz ve içerisine şu kodları yazıyoruz:
<template>
<div id="Bilesen2">
<slot name="baslik"></slot>
<slot name="isim"></slot>
<slot name="yas"></slot>
</div>
</template>
<script>
export default {
name: 'Bilesen2'
}
</script>
<style scoped>
#Bilesen2 {text-align:center;}
</style>Bir öncekinden farklı olarak export default içerisine props yazmamız gerekmiyor. Yakalayacağımız verileri ise burada <slot name=”baslik”></slot> şeklinde belirtiyoruz.
App.vue dosyasını ise aşağıdaki gibi değiştirmemiz gerekiyor.
<template>
<div id="app">
<Bilesen baslik="Hoş Geldiniz" isim="Mustafa Çağrı Güven" yas="32" />
<hr />
<Bilesen2>
<h1 slot="baslik">Hoş Geldiniz</h1>
<p slot="isim">Mustafa Çağrı Güven</p>
<p slot="yas">32</p>
</Bilesen2>
</div>
</template>
<script>
import Bilesen from './components/Bilesen.vue'
import Bilesen2 from './components/Bilesen2.vue'
export default {
name: 'App',
components: {
Bilesen,
Bilesen2
}
}
</script>Vue.js Compopnent Slot Kullanımı İçin Ne Yaptık?
<Bilesen2> tagleri arasında iletmek istediğimiz kodları normal bir şekilde ekledik ancak gönderdiğimiz veriyi işaretlemek için slot=”baslik” gibi isimlendirme yaptık. Burada işaretlediğimiz şekilde de diğer sayfada yakaladık.
Görüntümüz de şu şekilde oluştu:
İşte bu kadar… Şimdi biraz da default slots ve slot defaults konularına bakalım.
Components: Default Slot
Az önce işaretlediğimiz verileri component içerisinde aynı isimlerle yakalayacağımızı söylemiştim. Peki ya işaretlemezsek? Sonraki sayfada da ne mi olacak?
Hemen Bilesen3.vue isminde bir dosya oluşturup içerisini de şu şekilde doldurup görelim.
<template>
<div id="Bilesen3">
<slot name="baslik"></slot>
<slot></slot>
<slot></slot>
<slot name="yas"></slot>
</div>
</template>
<script>
export default {
name: 'Bilesen3'
}
</script>
<style scoped>
#Bilesen3 {text-align:center;}
</style>App.vue’yu da şu şekilde güncelliyoruz.
<template>
<div id="app">
<Bilesen baslik="Hoş Geldiniz" isim="Mustafa Çağrı Güven" yas="32" />
<hr />
<Bilesen2>
<h1 slot="baslik">Hoş Geldiniz</h1>
<p slot="isim">Mustafa Çağrı Güven</p>
<p slot="yas">32</p>
</Bilesen2>
<hr />
<Bilesen3>
<h1 slot="baslik">Hoş Geldiniz</h1>
<p>Mustafa Çağrı Güven</p>
<p slot="yas">32</p>
</Bilesen3>
</div>
</template>
<script>
import Bilesen from './components/Bilesen.vue'
import Bilesen2 from './components/Bilesen2.vue'
import Bilesen3 from './components/Bilesen3.vue'
export default {
name: 'App',
components: {
Bilesen,
Bilesen2,
Bilesen3
}
}
</script>Görüntümüz de şu şekilde olacak:
Yani işaretlemediğimiz tagleri component içerisinde <slot></slot> yazarak yakalayabiliriz. Ancak, yapıyı çok karıştırdığı için default slot’lar çok dikkatli bir şekilde kullanılmalıdır.
Vue.js Components: Slot Defaults
Slot Defaults ve Default Slot. Evet biraz kafa karıştırdı değil mi? :) Hemen detayına girelim.
Component’ı oluştururken yazar attribute eklenmesini opsiyonel yapsak, eğer girilmezse de default bir yazı yazdırsak nasıl olur dersiniz? İşte Slot Defaults’lar tam da bu işe yarıyorlar.
Hemen Bilesen4.vue isminde bir dosya oluşturuyoruz:
<template>
<div id="Bilesen4">
<slot name="baslik"></slot>
<slot name="yas"></slot>
<slot name="yazar">App.Vue'da tanımlanmamış yazar: Mustafa Çağrı!</slot>
</div>
</template>
<script>
export default {
name: 'Bilesen4'
}
</script>
<style scoped>
#Bilesen4 {text-align:center;}
</style>App.vue’yu da şu şekilde güncelliyoruz:
<template>
<div id="app">
<Bilesen baslik="Hoş Geldiniz" isim="Mustafa Çağrı Güven" yas="32" />
<hr />
<Bilesen2>
<h1 slot="baslik">Hoş Geldiniz</h1>
<p slot="isim">Mustafa Çağrı Güven</p>
<p slot="yas">32</p>
</Bilesen2>
<hr />
<Bilesen3>
<h1 slot="baslik">Hoş Geldiniz</h1>
<p>Mustafa Çağrı Güven</p>
<p slot="yas">32</p>
</Bilesen3>
<hr />
<Bilesen4>
<h1 slot="baslik">Hoş Geldiniz</h1>
<p slot="yas">32</p>
</Bilesen4>
<hr />
<Bilesen4>
<h1 slot="baslik">Hoş Geldiniz</h1>
<p slot="yas">32</p>
<p slot="yazar">Yazar App.vue'dan Geliyor...</p>
</Bilesen4>
</div>
</template>
<script>
import Bilesen from './components/Bilesen.vue'
import Bilesen2 from './components/Bilesen2.vue'
import Bilesen3 from './components/Bilesen3.vue'
import Bilesen4 from './components/Bilesen4.vue'
export default {
name: 'App',
components: {
Bilesen,
Bilesen2,
Bilesen3,
Bilesen4
}
}
</script>Ta daa…
Genel olarak bu yazıda componentlara veri göndermeyi gördük. Bir sonraki yazıda ise tam tersini kurgulayacağız. Yani component’ların içerisinden, component’ın çağırıldığı yere veri göndermeyi deneyeceğiz.
Projeyi indirdikten sonra önce npm install ile gereksinimleri / node_modules dosyalarını indirmeniz gerekiyor. Ardından da npm run serve ile projenizi ayağa kaldırabilirsiniz.