[ Laravel & Vue.js ] 5.Video: Component Kullanımı-3



2 dakikalık okuma
March 18, 2019

Bu videoda;

  • Componentler içerisinde “props” yani properties kullanımını gösterdim.
  • Ayrıca Laravel controller’ından gelen değişkenlerle Vue props’larının nasıl haberleşebildiğini örneklendirdim.
  • Bir component’te birden fazla props varsa v-bind ile nesne oluşturarak bunların kısa kullanımından bahsettim.

Buyrun video burada:


Video Özeti

Componentler içerisinde “props” kullanımı

Bu özellikle componentlerle sayfamız arası bilgi alış-verişi sağlayabiliriz. Kullanımı şöyledir:

props: ['kimlik','isim']

Şimdi 3 adımda nasıl kullanacağımızı göstereyim:

Birinci adım: Aşağıdaki resimde de görülmek üzere component’imiz içerisinde props’ları tanımlıyoruz.

Props tanımlama

İkinci adım: Component elementimizi web sayfamızda yazarken propsları da elementimiz içerisinde kullanarak dataları alıyoruz.

Propsların kullanımı

Üçüncü adım: Component elementimizden alınan dataları componentimizin içerisinde aşağıdaki örnekte olduğu gibi kullanabiliyoruz.

Propsların component içinde kullanımı

Birden fazla props varsa v-bind ile nesne oluşturarak da farklı bir yöntemle de bilgi alımı yapabiliriz.

Örneğin: selamDeneme.vue component dosya içeriğimiz şu şekilde olsun:

Propsların component içinde kullanımı

Yukarıdaki kodda props alanına “veri” adında yeni bir değişken daha ekleyelim. Şöyle olsun:

props: ['kimlik','isim','veri'],

şimdi master sayfamız olan welcome.blade.php dosyamızda bunu kullanırken:

`<selam-deneme  v-bind:veri="{kimlik='35',isim='Aliye' }"></selam-deneme>`

yapalım. Ne yapmış olduk. Bir nesne oluşturduk ve nesne içerisinde kimlik ve isim adında 2 verimiz var. Bunu selamDeneme.vue componentimizde kullanırken şöyle yapacağız:

Propsların component içinde kullanımı

Bu kadar! Unutmadan v-bind:veri ifadesinin kısaltılmışı da var. Şöyle de yazabiliriz:

`<selam-deneme  :veri="{kimlik='35',isim='Aliye' }"></selam-deneme>`

:veri ifadesi v-bind:veri ifadesinin kısayoludur. “veri“den önce kullandığım iki nokta üst üsteye dikkat edin lütfen.


Etiketler: