Frontend Academy · Ders

Bileşen Props'ları ve Emits

defineProps ile verileri alt bileşene aktarın, defineEmits ile olayları üst bileşene iletin ve props'ları type ile required kısıtlarıyla doğrulayın.

Bileşen Props'ları ve Emits, CoddyKit'te ücretsiz bir Frontend Academy dersidir. Bu, 4 dersinin 4. 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, Frontend Academy öğrenme yolunun bir parçasıdır ve ilerlemeniz web ve CoddyKit uygulaması arasında senkronize olur. Frontend Academy kursu toplamda 4 dersten oluşur.

Vue 3'te Props

Props, verileri üst bileşenden alt bileşene aktarır. <script setup> içinde bunları tanımlamak için defineProps() kullanın. Props, alt bileşende salt okunurdur; bunları doğrudan değiştirmeyin.

<script setup lang="ts">
const props = defineProps<{
  title: string;
  count?: number;
  variant?: 'primary' | 'secondary';
}>();
</script>

<template>
  <h2>{{ title }} ({{ count ?? 0 }})</h2>
</template>

Props Varsayılanları için withDefaults

Varsayılan değerler sağlamak için defineProps() çağrısını withDefaults() ile sarın.

<script setup lang="ts">
const props = withDefaults(defineProps<{
  count?: number;
  variant?: 'primary' | 'secondary';
}>(), {
  count: 0,
  variant: 'primary'
});
</script>

Şablonda Props Aktarma

Sabit değerleri normal öznitelikler olarak aktarın. Dinamik değerleri v-bind (:) ile aktarın. Boolean özniteliklerini, değer vermeden yalnızca mevcut olacak şekilde aktarın.

<MyButton title="Submit" :count="activeCount" variant="primary" />
<Toggle :disabled="isLoading" />

Emits — Alt Bileşenden Üst Bileşene İletişim

Alt bileşenler, olay yayınlayarak üst bileşene iletişim gönderir. Bileşenin yayınlayabileceği olayları tanımlamak için defineEmits() kullanın, ardından döndürülen emit işlevini çağırın.

<script setup lang="ts">
const emit = defineEmits<{
  update: [value: string];
  close: [];
  submit: [data: FormData];
}>();

function handleSubmit(data: FormData) {
  emit('submit', data); // fire the event
}
</script>

Üst Bileşende Emits Dinleme

Alt bileşenlerden gelen özel olayları dinlemek için şablonda @eventName kullanın.

<SearchInput
  @update="searchTerm = $event"
  @submit="handleSearch"
/>

Özel Bileşenlerle v-model

Özel bir bileşende v-model, :modelValue + @update:modelValue ifadesinin kısa biçimidir. Bileşen, prop'u kabul etmeli ve güncelleme olayını yayınlamalıdır.

<!-- Parent: -->
<MyInput v-model="email" />

<!-- MyInput.vue: -->
<script setup lang="ts">
defineProps<{ modelValue: string }>();
const emit = defineEmits<{ 'update:modelValue': [string] }>();
</script>

<template>
  <input :value="modelValue" @input="emit('update:modelValue', ($event.target as HTMLInputElement).value)" />
</template>

Birden Çok v-model Bağlaması

Vue 3, adlandırılmış değiştiricilerle tek bir bileşende birden çok v-model kullanımını destekler.

<UserForm v-model:firstName="user.firstName" v-model:lastName="user.lastName" />

Prop Doğrulama

Options API'de veya çalışma zamanı props bildiriminde tür, zorunluluk ve doğrulayıcı kısıtları ekleyin. TypeScript tabanlı defineProps(), bu doğrulamayı derleme zamanında sağlar.

Prop ve Veri — Tek Yönlü Akış

Vue, tek yönlü veri akışını zorunlu kılar: props üst bileşenden alt bileşene, olaylar ise alt bileşenden üst bileşene akar. Bir alt bileşenin veriyi değiştirmesi gerekiyorsa bir olay yayınlar ve güncellemeyi üst bileşen yönetir.

Props'a Alternatif Olarak Yuvalar

Yalnızca veri değil, HTML veya bileşen olması gereken içerikler için yuvaları kullanın. Üst bileşen içeriği bileşenin etiketleri arasına yerleştirir; alt bileşen ise <slot /> ile bu içeriği oluşturur.

<!-- Parent: -->
<Card title="Hello">
  <p>This content goes in the default slot.</p>
</Card>

<!-- Card.vue: -->
<template>
  <div class="card">
    <h2>{{ title }}</h2>
    <slot />  <!-- renders the p tag -->
  </div>
</template>

Hızlı Kontrol

Bir alt Vue bileşeni, bir olayı üst bileşenine nasıl iletir?

Props ve Emits Özeti

Türü belirtilmiş prop bildirimleri için defineProps. Varsayılan değerler için withDefaults. Props, alt bileşenlerde salt okunurdur. Yayınlanan olayları tanımlamak ve türlerini belirtmek için defineEmits. Üst bileşende dinlemek için @eventName. v-model = :modelValue + @update:modelValue. Tek yönlü veri akışı: props aşağı, olaylar yukarı. İçerik veya şablon parçaları aktarmak için yuvalar.

Sıkça Sorulan Sorular

“Bileşen Props'ları ve Emits” dersi ücretsiz mi?

Evet — “Bileşen Props'ları ve Emits” 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 Frontend Academy kursunun geri kalanını açmak için CoddyKit PRO'ya yükselt. Frontend Academy kursu toplamda 4 dersten oluşur.

“Bileşen Props'ları ve Emits” dersinde ne öğreneceğim?

defineProps ile verileri alt bileşene aktarın, defineEmits ile olayları üst bileşene iletin ve props'ları type ile required kısıtlarıyla doğrulayın. Frontend 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.

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

Önceden deneyim gerekmez. CoddyKit'te Frontend 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 4. dersidir.

“Bileşen Props'ları ve Emits” 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 Frontend Academy dersinde kod yazıp çalıştırabilir miyim?

Evet. Her Frontend 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

← Frontend Academy Sayfasına Dön