0Pricing
Vue Academy · Ders

Prop Aktarma Sorunu

Prop aktarmanın bakım yapılabilirliğini neden azalttığı, provide/inject'in neyi çözdüğü, ne zaman kullanılacağı.

Prop Aktarma Sorunu, CoddyKit'te ücretsiz bir Vue Academy dersidir. Bu, 4 dersinin 1. dersidir. Aşağıdan dersin tamamını ücretsiz okuyabilir, sonra tarayıcıda yerleşik kod editörü ve 7/24 yapay zeka koçu ile uygulamalı olarak pratik yapabilirsin. Bu, Vue Academy öğrenme yolunun bir parçasıdır ve ilerlemeniz web ve CoddyKit uygulaması arasında senkronize olur. Vue Academy kursu toplamda 4 dersten oluşur.

Özellik Aktarımı Nedir

Özellik aktarımı, verilerin yalnızca derinlerde iç içe bulunan bir bileşene ulaşması için birçok bileşen katmanından geçirilmesidir. Aradaki her bileşen, özelliği hiç kullanmasa bile kabul edip iletmek zorunda kalır.

Derin Bir Bileşen Ağacı

Bir ağaç düşünün: App -> Layout -> Page -> Section -> Widget. En alttaki Widget mevcut temaya ihtiyaç duyuyor, ancak bunu yalnızca en üstteki App biliyor.

App
  Layout
    Page
      Section
        Widget  <-- needs "theme"

App Üzerinden Geçirme

App, theme değerini tutar ve bunu bir prop olarak Layout bileşenine iletir.

<!-- App.vue -->
<Layout :theme="theme" />

Layout Değeri İletiyor

Layout theme değerini kullanmaz; ancak yalnızca bir sonraki düzeye ulaştırmak için bu değeri tanımlayıp iletmek zorundadır.

<!-- Layout.vue -->
const props = defineProps({ theme: String });
// template:
<Page :theme="props.theme" />

Page de Değeri İletiyor

Page de aynı gereksiz kodu tekrarlar: theme ile ilgilenmemesine rağmen önce tanımlar, sonra iletir.

<!-- Page.vue -->
const props = defineProps({ theme: String });
<Section :theme="props.theme" />

Section Yeniden İletiyor

Aynı durum Section için de geçerlidir. Her katman, o katmanın sorumluluğuyla ilgisi olmayan tekrarlı bağlantı kodları ekler.

<!-- Section.vue -->
const props = defineProps({ theme: String });
<Widget :theme="props.theme" />

Sonunda Widget Kullanıyor

theme değerini gerçekten yalnızca en alttaki Widget kullanır. Üstteki dört katman sadece aktarım yapmıştır.

<!-- Widget.vue -->
const props = defineProps({ theme: String });
// uses props.theme to style itself

Bu Neden Sorun Oluşturur

Özellik aktarımı şu sorunlara yol açar:

  • Aradaki her bileşende gereksiz kod bulunması
  • Özelliğin adı değiştiğinde yeniden düzenlemelerin birçok dosyayı bozması
  • Aradaki özelliklerin her bileşenin gerçekten neye ihtiyaç duyduğunu belirsizleştirmesi
  • Yeni paylaşılan değerler eklemenin zorlaşması

Çok Sayıda Değerle Sorun Büyür

Şimdi user, locale ve permissions değerlerini de ekleyin. Her biri dört katmanın tamamından geçirilmelidir; bu da gereksiz kodu katlayarak artırır.

<Layout
  :theme="theme"
  :user="user"
  :locale="locale"
  :permissions="permissions"
/>

Her Paylaşılan Değer Props İçin Uygun Değildir

Props, doğrudan üst-alt bileşen iletişimi için harikadır. Ancak bir alt ağaçta derinlerde ihtiyaç duyulan theme, mevcut kullanıcı veya i18n gibi değerler için bunları aktarmak doğru araç değildir. Verileri tüm alt bileşenlere doğrudan sağlayacak bir yönteme ihtiyacımız var.

provide / inject Kullanıma Giriyor

Vue provide / inject, bir ata bileşenin verileri sağlamasına ve herhangi bir alt bileşenin aradaki katmanları atlayarak bunları doğrudan istemesine olanak tanır. Sonraki derslerde sağlama ve alma işlemlerini ele alacağız.

Kısa Kontrol

Özellik aktarımını en iyi açıklayan ifade hangisidir?

Özet

Özellik aktarımının, derin bir ağaçtaki her aradaki bileşeni kullanmadığı özellikleri tanımlayıp iletmeye zorladığını; bunun da gereksiz kodlara ve kırılgan yeniden düzenlemelere yol açtığını gördünüz. Derinlerde paylaşılan değerler için daha temiz çözüm provide/inject kullanmaktır.

Sıkça Sorulan Sorular

“Prop Aktarma Sorunu” dersi ücretsiz mi?

Evet — “Prop Aktarma Sorunu” dersin tüm metni burada web'de ücretsiz olarak okunabilir. Etkileşimli olarak pratik yapmak (yerleşik kod editörü ve 7/24 yapay zeka koçu) ve Vue Academy kursunun geri kalanını açmak için CoddyKit PRO'ya yükselt. Vue Academy kursu toplamda 4 dersten oluşur.

“Prop Aktarma Sorunu” dersinde ne öğreneceğim?

Prop aktarmanın bakım yapılabilirliğini neden azalttığı, provide/inject'in neyi çözdüğü, ne zaman kullanılacağı. Vue Academy ile uygulamalı kodu tarayıcıda doğrudan çalıştırarak pratik yaparsın ve 7/24 yapay zeka koçu dersi çalışırken sorularını yanıtlar.

Vue Academy öğrenmeye başlamak için deneyim gerekli mi?

Önceden deneyim gerekmez. CoddyKit'te Vue Academy, başlangıçtan ileri seviyeye kadar yapılandırıldığı için buradan başlayabilir veya başından başlayıp kendi hızında ilerleme yapabilirsin. Bu, 4 dersinin 1. dersidir.

“Prop Aktarma Sorunu” dersi ne kadar sürer?

Çoğu CoddyKit dersi yaklaşık 5–10 dakika sürer. Her biri kısa ve etkileşimli olduğu için sabit ilerleme yaparsın ve web ile uygulama arasında tam olarak bıraktığın yerden devam edebilirsin.

Bu Vue Academy dersinde kod yazıp çalıştırabilir miyim?

Evet. Her Vue Academy dersi yerleşik bir kod editörü içerir, bu sayede tarayıcıda gerçek kod yazıp çalıştırabilir ve anlık yapay zeka geri bildirimi alırsın — yerel kurulum gerekli değildir.

Bu kursun tüm dersleri

  1. Prop Aktarma Sorunu
  2. Üst Bileşenlerde provide()
  3. Alt Bileşenlerde inject()
  4. Uygulama Düzeyinde Durum için Provide/Inject
← Vue Academy Sayfasına Dön