Vue.js’de Prop Kullanarak Componentler Arası Veri Göndermek

Bu yazıda sizlere Vue.js yazarken proplar aracılığıyla parent to child componentler arası veri göndermekten bahsedeceğim. Vue.js de componentler arasında haberleşmenin birden fazla yolu vardır fakat biz bu yazımızda sadece proplardan bahsedeceğiz.

Proplar, componentler arası veri göndermek için en basit ve etkili yoldur. Fakat propları sadece parent to child şeklinde gönderebiliriz. Bunun anlamıda sadece componenti çağırdığınız yerden componente gönderebileceğinizdir. Yani siz componentin içerisinden prop aracılığyla dışarı değişken gönderemezsiniz. Fakat elbette ki bunu da yolu var. Emit etmek diyoruz bu yola fakat dediğim gibi bu yazıda bundan bahsetmeyeceğiz.

Aşağıda göreceğiniz gibi bir forgot.vue adlı bir pagedeyim ve burda nuxt-link taginin içinde nx-text adlı bir component çağırıyorum. Bu projede ben Nuxt.js kullanıyorum fakat sizin kullanmanıza gerek yok. nuxt-link tagide Nuxt.js’e ait bir tagdir. Componente herhangi bir etkisi yok bu durumda.

Nx-text componentimde şöyle gözüküyor;

Üstte ki görselde görüldüğü üzere props’un içinde text objesini tanımladık. Type diyerek ise gelecek propun tipinin ne olacağını söyledik. Default kısmına ise parent’dan bir veri gelmediği durumda textin içine yazılacak değeri giriyoruz.

Not: Default value girmek istemiyorsanız eğer yerine required girebilirsiniz. Bu demek oluyor ki text propu eğer child’a gönderilmez ise kod hata verecektir. (“required: false” girerseniz eğer default veri girilmediği için kod hata verebilir ve tavsiye edilmez.)

“required: true” olduğu durumda veri göndermek zorunludur.

Props’dan gelen değişkeni template’in içinde data’da olan statik bir veriyi kullanır gibi kullanabilirsiniz ;

{{ degisken_ismi }} şeklinde yazabilirsiniz.

Parent kısmında ise işler dahada kolay:

text=”Back” kısmında gönderiyoruz.

Componenti çağırdığınız yerde html taginin içine parametre yazarmış gibi yani text=”String Değer” şeklinde yazabilirsiniz. Eğer içine değişken veya Boolean bir değer gönderecekseniz şu şekilde yazmanız gerekiyor;

“alternative_text “ data fonksiyonunda olan string bir değer.

Bu şekilde verimiz başarılı bir şekilde child componentine gitmiş oluyor.

Biraz Daha Karmaşıklaştıralım

Eğer biraz daha komplike bir örnek göstermek gerekirse şöyle bir örnek yapabiliriz. NxBigButton componentimizin içinde NxText componentini çağırıyoruz.

NxBigButton componentini ise AdvantageCard componentinde çağırıyorum.

“amount” değişkeni string bir değerdir.

Yukarıda görüldüğü gibi componente gradient ve text proplarını gönderiyorum.

NxBigButton da propları yukarıdaki gibi tanımladık.

NxBigButton’un içinde computed methodunda bgGradient adlı bir method oluşturdum ve koşula göre bir string döndürmesini istedim. this.gradient koşulu zaten Boolean bir değer olduğu için true veya false gelmesi duruma göre if bloğu null veya string bir değer döndürecek.

Aşağıda görüldüğü gibi gelen text propunu geldiği gibi nx-text componentine gönderiyoruz. bgGradient methodunu ise class’ın içinde çağırıyoruz. Böylece gradient değeri dışardan true değeri alırsa if bloğu tailwind class’larını döndürüp button’un classlarına yazacağı için buttonumuza dışardan gelen değere göre stil vermiş oluyoruz ve ayrıca buttonun içinde de nx-text’e AdvantageCard’dan gönderdiğimiz değerde buttonun içine yazıldığı için buttonumuza hem stil hemde string bir değer yazmış olduk prop aracılığıyla.

--

--

I created my first website at 12 years old. After that I learned how to develop web fronted and now striving to build upon what I know about Frontend.

Love podcasts or audiobooks? Learn on the go with our new app.

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store
Yusufcan Yılmaz

Yusufcan Yılmaz

I created my first website at 12 years old. After that I learned how to develop web fronted and now striving to build upon what I know about Frontend.