0Pricing
Vue Academy · Pelajaran

defineProps dan defineEmits

Props bertipe dengan defineProps (), defineEmits (), withDefaults() untuk nilai bawaan.

defineProps dan defineEmits adalah pelajaran Vue Academy gratis di CoddyKit. Ini adalah pelajaran 2 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 Vue Academy, dan progresmu tersinkronisasi di web dan aplikasi CoddyKit. Kursus Vue Academy mencakup 4 pelajaran total.

Berkomunikasi Antar Komponen

Komponen menerima data melalui props dan mengirim pesan ke atas melalui peristiwa. Di dalam <script setup>, Anda mendeklarasikannya dengan makro defineProps dan defineEmits.

defineProps dengan Cara Runtime

Anda dapat mendeklarasikan props dengan objek saat dijalankan, sama seperti dalam Options API. Cara ini berfungsi baik dalam JS maupun TS.

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

defineProps dengan Generik TypeScript

Dalam TypeScript, berikan tipe melalui generik untuk mendapatkan props yang lebih rapi dan diperiksa tipenya. Kompilator mengubah tipe tersebut menjadi deklarasi saat dijalankan.

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

Props Opsional dengan ?

Tambahkan tanda tanya pada properti dalam tipe agar properti tersebut bersifat opsional. Props opsional dapat bernilai undefined jika induk tidak mengirimkannya.

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

Nilai Bawaan dengan withDefaults

Bentuk berbasis tipe tidak memiliki tempat untuk nilai bawaan, sehingga Vue menyediakan withDefaults. Bungkus defineProps dan berikan objek nilai bawaan.

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

Menggunakan Props di Templat

Props bersifat reaktif. Rujuk props secara langsung di templat, atau melalui props.x dalam script.

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

Props Hanya Dapat Dibaca

Jangan pernah mengubah prop di dalam komponen anak. Props mengalir satu arah: dari induk ke anak. Jika Anda memerlukan salinan lokal yang dapat diedit, turunkan nilainya dengan computed atau ref lokal.

Mendeklarasikan Peristiwa dengan defineEmits

defineEmits mendeklarasikan peristiwa yang dapat dipicu oleh komponen. Bentuk runtime menerima array nama peristiwa.

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

Peristiwa Bertipe dengan TypeScript

Bentuk berbasis tipe memungkinkan Anda menentukan nama peristiwa dan tipe data muatannya. Cara ini mendeteksi kesalahan seperti memancarkan argumen dengan tipe yang salah.

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

Memancarkan dengan Muatan

Panggil emit dengan nama peristiwa dan data apa pun. Induk mendengarkan melalui @submit dan menerima muatan tersebut.

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

Menggabungkannya

Komponen anak menerima prop title dan memancarkan peristiwa submit. Induk merespons keduanya—data satu arah yang rapi dan bertipe, serta peristiwa yang eksplisit.

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

Pemeriksaan Singkat

Uji pemahaman Anda tentang props dan emits.

Rangkuman

Anda telah mempelajari masukan dan keluaran komponen dalam <script setup>:

  • defineProps mendeklarasikan masukan (objek runtime atau generik TS).
  • Gunakan ? untuk props opsional dan withDefaults untuk nilai bawaan.
  • Props hanya dapat dibaca dan mengalir satu arah.
  • defineEmits mendeklarasikan peristiwa, dengan nama dan muatan bertipe yang bersifat opsional.

Pertanyaan yang Sering Diajukan

Apakah pelajaran “defineProps dan defineEmits” gratis?

Ya — teks lengkap “defineProps dan defineEmits” 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 4 pelajaran total.

Apa yang akan aku pelajari di “defineProps dan defineEmits”?

Props bertipe dengan defineProps (), defineEmits (), withDefaults() untuk nilai bawaan. 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 4.

Berapa lama pelajaran “defineProps dan defineEmits” 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

  1. Pengantar script setup
  2. defineProps dan defineEmits
  3. defineExpose dan useAttrs
  4. Mengimpor dan Menggunakan Composable dalam script setup
← Kembali ke Vue Academy