0Pricing
Vue Academy · Ders

defineProps ve defineEmits

defineProps () ile türlendirilmiş özellikler, defineEmits (), varsayılanlar için withDefaults().

defineProps ve defineEmits, CoddyKit'te ücretsiz bir Vue Academy dersidir. Bu, 4 dersinin 2. 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.

Bileşenler Arasında İletişim

Bileşenler verileri props aracılığıyla alır ve iletileri olaylar aracılığıyla üst bileşene gönderir. <script setup> içinde bunları defineProps ve defineEmits makrolarıyla bildirirsiniz.

defineProps: Çalışma Zamanı Yöntemi

Options API'de olduğu gibi props'ları bir çalışma zamanı nesnesiyle bildirebilirsiniz. Bu yöntem hem JS hem de TS ile çalışır.

<script setup>
const props = defineProps({
  title: String,
  count: Number
})
console.log(props.title)
</script>

TypeScript Genel Türüyle defineProps

TypeScript'te daha temiz ve tür denetimli props'lar için genel tür aracılığıyla bir tür gönderin. Derleyici, türü çalışma zamanı bildirimlerine dönüştürür.

<script setup lang="ts">
const props = defineProps<{
  title: string
  count: number
}>()
</script>

? ile İsteğe Bağlı Props

Bir özelliği isteğe bağlı yapmak için türündeki özelliğin sonuna soru işareti ekleyin. Üst bileşen bunları göndermezse isteğe bağlı props'lar undefined olabilir.

<script setup lang="ts">
const props = defineProps<{
  title: string
  subtitle?: string
}>()
</script>

withDefaults ile Varsayılan Değerler

Türe dayalı biçimde varsayılan değerler için bir alan yoktur; bu nedenle Vue withDefaults sağlar. defineProps'u sarmalayın ve bir varsayılan değerler nesnesi sağlayın.

<script setup lang="ts">
const props = withDefaults(defineProps<{
  title?: string
  count?: number
}>(), {
  title: 'Untitled',
  count: 0
})
</script>

Şablonda Props Kullanma

Props'lar reaktiftir. Onlara doğrudan şablonda veya script içinde props.x aracılığıyla başvurun.

<template>
  <h1>{{ title }}</h1>
  <p>Count: {{ count }}</p>
</template>

Props'lar Salt Okunurdur

Bir prop'u asla alt bileşenin içinde değiştirmeyin. Props'lar tek yönde, üst bileşenden alt bileşene akar. Yerel olarak düzenlenebilir bir kopyaya ihtiyacınız varsa bunu computed veya yerel bir ref ile türetin.

defineEmits ile Olayları Bildirme

defineEmits, bir bileşenin hangi olayları tetikleyebileceğini bildirir. Çalışma zamanı biçimi, olay adlarından oluşan bir dizi alır.

<script setup>
const emit = defineEmits(['submit', 'cancel'])
function onSave() { emit('submit') }
</script>

TypeScript ile Türlendirilmiş Olaylar

Türe dayalı biçim, olay adlarını ve veri yükü türlerini belirtmenizi sağlar. Bu, yanlış bağımsız değişken türüyle olay tetiklemek gibi hataları yakalar.

<script setup lang="ts">
const emit = defineEmits<{
  (e: 'submit', payload: string): void
  (e: 'cancel'): void
}>()
</script>

Veri Yüküyle Olay Tetikleme

emit'i olay adı ve istediğiniz verilerle çağırın. Üst bileşen @submit ile dinler ve veri yükünü alır.

<script setup lang="ts">
const emit = defineEmits<{ (e: 'submit', value: string): void }>()
function send() { emit('submit', 'hello') }
</script>

Hepsini Bir Araya Getirme

Bir alt bileşen title prop'unu alır ve bir submit olayı tetikler. Üst bileşen her ikisine de tepki verir — temiz, türlendirilmiş ve tek yönlü veri akışı ile açık olaylar.

<script setup lang="ts">
defineProps<{ title: string }>()
const emit = defineEmits<{ (e: 'submit', v: string): void }>()
</script>

Hızlı Kontrol

Props ve emit konusundaki kavrayışınızı kontrol edin.

Özet

<script setup> içinde bileşen girdilerini ve çıktılarını öğrendiniz:

  • defineProps, girdileri bildirir (çalışma zamanı nesnesi veya TS genel türü).
  • İsteğe bağlı props'lar için ?, varsayılan değerler için withDefaults kullanın.
  • Props'lar salt okunurdur ve tek yönde akar.
  • defineEmits, isteğe bağlı türlendirilmiş adlar ve veri yükleriyle olayları bildirir.

Sıkça Sorulan Sorular

“defineProps ve defineEmits” dersi ücretsiz mi?

Evet — “defineProps ve defineEmits” 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.

“defineProps ve defineEmits” dersinde ne öğreneceğim?

defineProps () ile türlendirilmiş özellikler, defineEmits (), varsayılanlar için withDefaults(). 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 2. dersidir.

“defineProps ve defineEmits” 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. script setup'e Giriş
  2. defineProps ve defineEmits
  3. defineExpose ve useAttrs
  4. script setup'te Composable'ları İçe Aktarma ve Kullanma
← Vue Academy Sayfasına Dön