Vue Academy · Ders

Props ve Özel Olaylar

Verileri props ile alt bileşenlere aktarın ve olayları üst bileşenlere emit edin.

2. ders / 313 adım

Props ve Özel Olaylar, CoddyKit'te ücretsiz bir Vue Academy dersidir. Bu, 3 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 3 dersten oluşur.

Üst ve Alt Component İletişimi

Component'ler iki yönde iletişim kurar:

Props, verileri üst component'ten alt component'e aktarır
Olaylar, iletileri alt component'ten üst component'e gönderir

Bu tek yönlü veri akışı, app'leri öngörülebilir tutar.

Props Bildirme

Alt component, kabul ettiği props'ları bildirir. Betik kurulumunda defineProps kullanın.

<script setup>
const props = defineProps(['title', 'count'])
</script>

<template>
  <h2>{{ title }}</h2>
  <p>{{ count }}</p>
</template>

Türlerle Props

Doğrulama için türleri belirtmek üzere props'ları bir nesne olarak bildirin.

<script setup>
defineProps({
  title: String,
  count: Number,
  isActive: Boolean
})
</script>

Varsayılan ve Gerekli Props'lar

Props'ları gerekli olarak işaretleyebilir ve varsayılan değerler verebilirsiniz.

<script setup>
defineProps({
  title: {
    type: String,
    required: true
  },
  count: {
    type: Number,
    default: 0
  }
})
</script>

Üst Component'ten Props Aktarma

Üst component verileri öznitelik olarak aktarır. Dinamik değerleri bağlamak için : kullanın.

<template>
  <ProductCard
    title="Coffee Mug"
    :count="stock"
    :is-active="available"
  />
</template>

<!-- static string vs bound expression -->

Prop Adlandırma Kuralı

Props'ları JS içinde camelCase olarak bildirin, şablonlarda kebab-case olarak aktarın.

JS prop'u: isActive
Şablon özniteliği: :is-active

Vue ikisi arasındaki dönüşümü otomatik olarak yapar.

Props'lar Salt Okunurdur

Alt component, props'larını doğrudan değiştirmemelidir.

Props'lar tek yönde, aşağı doğru akar
Bunları değiştirmek öngörülebilirliği bozar ve uyarıları tetikler
Paylaşılan verileri değiştirmek için bir olay göndererek üst component'in veriyi güncellemesini sağlayın

Gönderilen Olayları Bildirme

Alt component, gönderdiği olayları defineEmits ile bildirir.

<script setup>
const emit = defineEmits(['increment', 'delete'])
</script>

Olay Gönderme

Bir olayı yukarı göndermek için emit işlevini çağırın; isterseniz bir veri yükü de aktarabilirsiniz.

<script setup>
const emit = defineEmits(['add'])

function handleClick() {
  emit("add", { id: 1, name: "Item" })
}
</script>

<template>
  <button @click="handleClick">Add</button>
</template>

Seçenekler API'sinde Olay Gönderme

Seçenekler API'sinde bunun yerine this.$emit çağrılır.

export default {
  emits: ["save"],
  methods: {
    onSave() {
      this.$emit("save", this.formData)
    }
  }
}

Üst Component'in Olayları Dinlemesi

Üst component, @event-name ile dinler ve veri yükünü alır.

<template>
  <TodoItem
    :task="task"
    @delete="removeTask"
    @add="onAdd"
  />
</template>

<script setup>
function onAdd(item) {
  console.log("Added:", item.name)
}
</script>

Hızlı Kontrol

Props ve olaylar hakkındaki anlayışınızı sınayın.

İnteraktif derste cevapla

Özet: Props ve Olaylar

Component iletişimini öğrendiniz:

defineProps, türleri ve varsayılanları olan props'ları bildirir
Props'lar aşağı doğru akar ve salt okunurdur
defineEmits olayları bildirir
emit("name", payload), olayları yukarı gönderir
Üst component @event ile dinler

Sırada: yerleştirme alanları ve kapsamlı yerleştirme alanları.

Başlamak ücretsiz

Yapay zeka eğitmeniyle HTML öğren — ücretsiz

Tarayıcında gerçek kod yaz ve çalıştır, 7/24 yapay zeka eğitmeninden anında yardım al; web'de ya da uygulamada kaldığın yerden devam et.

Kurslar: 42
Dersler: 156

Ücretsiz öğrenmeye başla Tüm kursu görüntüle

Sıkça Sorulan Sorular

“Props ve Özel Olaylar” dersi ücretsiz mi?

Evet — “Props ve Özel Olaylar” 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 3 dersten oluşur.

“Props ve Özel Olaylar” dersinde ne öğreneceğim?

Verileri props ile alt bileşenlere aktarın ve olayları üst bileşenlere emit edin. 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, 3 dersinin 2. dersidir.

“Props ve Özel Olaylar” 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

← Vue Academy Sayfasına Dön