Frontend Academy · Pelajaran

Props dan Emit Komponen

Teruskan data ke bawah dengan defineProps, kirim event ke atas dengan defineEmits, dan validasi props dengan batasan type dan required.

Props dan Emit Komponen adalah pelajaran Frontend Academy gratis di CoddyKit. Ini adalah pelajaran 4 dari 4. 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 Frontend Academy, dan progresmu tersinkronisasi di web dan aplikasi CoddyKit. Kursus Frontend Academy mencakup 4 pelajaran total.

Props dalam Vue 3

Props meneruskan data dari induk ke anak. Dalam <script setup>, gunakan defineProps() untuk mendeklarasikannya. Props bersifat hanya-baca di komponen anak—jangan pernah mengubahnya secara langsung.

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

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

withDefaults untuk Nilai Bawaan Props

Bungkus defineProps() dengan withDefaults() untuk menyediakan nilai bawaan.

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

Meneruskan Props di Templat

Teruskan nilai statis sebagai atribut biasa. Teruskan nilai dinamis dengan v-bind (:). Teruskan atribut boolean berdasarkan keberadaannya (tanpa nilai).

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

Emits — Komunikasi Anak ke Induk

Komponen anak berkomunikasi ke atas dengan memancarkan peristiwa. Gunakan defineEmits() untuk mendeklarasikan peristiwa yang dapat dipancarkan komponen, lalu panggil fungsi emit yang dikembalikan.

<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>

Mendengarkan Emit di Komponen Induk

Gunakan @eventName dalam templat untuk mendengarkan peristiwa khusus dari komponen anak.

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

v-model dengan Komponen Khusus

v-model pada komponen khusus adalah bentuk singkat dari :modelValue + @update:modelValue. Komponen tersebut harus menerima props dan memancarkan peristiwa pembaruan.

<!-- 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>

Beberapa Pengikatan v-model

Vue 3 mendukung beberapa v-model pada satu komponen dengan pengubah bernama.

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

Validasi Props

Dalam API Opsi atau deklarasi props saat runtime, tambahkan batasan untuk tipe, required, dan validator. defineProps() berbasis TypeScript menyediakan hal ini pada waktu kompilasi.

Props vs Data — Aliran Satu Arah

Vue menerapkan aliran data satu arah: props mengalir dari induk ke anak; peristiwa mengalir dari anak ke induk. Jika anak perlu mengubah data, anak memancarkan peristiwa dan induk menangani pembaruan tersebut.

Slot sebagai Alternatif Props

Untuk konten yang seharusnya berupa HTML atau komponen, bukan sekadar data, gunakan slot. Induk menyediakan konten di antara tag komponen; anak merendernya dengan <slot />.

<!-- 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>

Cek Cepat

Bagaimana komponen anak Vue mengomunikasikan suatu peristiwa kembali ke induknya?

Ringkasan: Props dan Emits

defineProps digunakan untuk deklarasi props bertipe. withDefaults digunakan untuk nilai bawaan. Props bersifat hanya-baca di komponen anak. defineEmits digunakan untuk mendeklarasikan dan memberi tipe pada peristiwa yang dipancarkan. Gunakan @eventName di induk untuk mendengarkan. v-model = :modelValue + @update:modelValue. Aliran data satu arah: props ke bawah, peristiwa ke atas. Gunakan slot untuk meneruskan konten atau fragmen templat.

Pertanyaan yang Sering Diajukan

Apakah pelajaran “Props dan Emit Komponen” gratis?

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

Apa yang akan aku pelajari di “Props dan Emit Komponen”?

Teruskan data ke bawah dengan defineProps, kirim event ke atas dengan defineEmits, dan validasi props dengan batasan type dan required. Kamu berlatih Frontend 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 Frontend Academy?

Tidak diperlukan pengalaman sebelumnya. Frontend 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 4 dari 4.

Berapa lama pelajaran “Props dan Emit Komponen” 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 Frontend Academy ini?

Ya. Setiap pelajaran Frontend 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 Frontend Academy