Vue Academy · Pelajaran

Props dan Event Kustom

Kirim data ke bawah dengan props dan emit event ke komponen induk.

Props dan Event Kustom adalah pelajaran Vue Academy gratis di CoddyKit. Ini adalah pelajaran 2 dari 3. Kamu bisa membaca pelajaran lengkapnya di bawah secara gratis — lalu praktikkan langsung di browser dengan editor kode bawaan dan tutor AI 24/7. Ini adalah bagian dari jalur belajar Vue Academy, dan progresmu tersinkronisasi di web dan aplikasi CoddyKit. Kursus Vue Academy mencakup 3 pelajaran total.

Komunikasi Induk-Anak

Komponen berkomunikasi dalam dua arah:

Props meneruskan data dari induk ke anak
Peristiwa mengirimkan pesan dari anak ke induk

Aliran data satu arah ini membuat app lebih mudah diprediksi.

Mendeklarasikan Props

Anak mendeklarasikan props yang diterimanya. Dalam script setup, gunakan defineProps.

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

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

Props dengan Tipe

Deklarasikan props sebagai objek untuk menentukan tipe yang digunakan dalam validasi.

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

Props dengan Nilai Bawaan dan Wajib

Anda dapat menandai props sebagai wajib dan memberikan nilai bawaan.

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

Meneruskan Props dari Induk

Induk meneruskan data sebagai atribut. Gunakan : untuk mengikat nilai dinamis.

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

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

Konvensi Penamaan Props

Deklarasikan props dalam camelCase di JS, lalu teruskan dalam kebab-case di templat.

Prop JS: isActive
Atribut templat: :is-active

Vue secara otomatis mengonversi keduanya.

Props Hanya Dapat Dibaca

Anak tidak boleh mengubah props-nya secara langsung.

Props mengalir satu arah, ke bawah
Mengubahnya secara langsung merusak keterprediksian dan memicu peringatan
Untuk mengubah data bersama, kirimkan peristiwa agar induk memperbaruinya

Mendeklarasikan Peristiwa yang Dikirim

Anak mendeklarasikan peristiwa yang dikirimnya dengan defineEmits.

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

Mengirimkan Peristiwa

Panggil fungsi emit untuk mengirimkan peristiwa ke atas, secara opsional bersama muatan.

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

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

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

Mengirimkan Peristiwa dalam Options API

Dalam Options API, Anda memanggil this.$emit sebagai gantinya.

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

Induk Mendengarkan Peristiwa

Induk mendengarkan dengan @event-name dan menerima muatannya.

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

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

Pemeriksaan Singkat

Uji pemahaman Anda tentang props dan peristiwa.

Ringkasan: Props dan Peristiwa

Anda telah mempelajari komunikasi komponen:

defineProps mendeklarasikan props dengan tipe dan nilai bawaan
Props mengalir ke bawah dan hanya dapat dibaca
defineEmits mendeklarasikan peristiwa
emit("name", payload) mengirimkan peristiwa ke atas
Induk mendengarkan dengan @event

Berikutnya: slot dan slot terlingkup.

Pertanyaan yang Sering Diajukan

Apakah pelajaran “Props dan Event Kustom” gratis?

Ya — teks lengkap “Props dan Event Kustom” gratis dibaca di sini di web. Untuk praktiknya secara interaktif (editor kode bawaan dan tutor AI 24/7) dan buka sisa kursus Vue Academy, upgrade ke CoddyKit PRO. Kursus Vue Academy mencakup 3 pelajaran total.

Apa yang akan aku pelajari di “Props dan Event Kustom”?

Kirim data ke bawah dengan props dan emit event ke komponen induk. Kamu berlatih Vue Academy dengan kode praktik yang langsung kamu jalankan di browser, dan tutor AI 24/7 menjawab pertanyaanmu saat kamu mengerjakan pelajaran ini.

Apakah aku perlu pengalaman untuk memulai Vue Academy?

Tidak diperlukan pengalaman sebelumnya. Vue Academy di CoddyKit dirancang untuk pemula hingga pelajar tingkat lanjut, jadi kamu bisa memulai di sini atau dari awal dan belajar sesuai kecepatan kamu sendiri. Ini adalah pelajaran 2 dari 3.

Berapa lama pelajaran “Props dan Event Kustom” memakan waktu?

Sebagian besar pelajaran CoddyKit memakan waktu sekitar 5–10 menit. Setiap pelajaran ringkas dan interaktif, jadi kamu membuat kemajuan stabil dan melanjutkan dari tempat kamu tinggalkan di web dan aplikasi.

Bisakah aku menulis dan menjalankan kode dalam pelajaran Vue Academy ini?

Ya. Setiap pelajaran Vue Academy menyertakan editor kode bawaan, jadi kamu menulis dan menjalankan kode nyata langsung di browser dan mendapatkan umpan balik AI instan — tidak diperlukan penyiapan lokal.

Semua pelajaran dalam kursus ini

← Kembali ke Vue Academy