Props dan Emits Bertipe dengan defineProps/defineEmits
Generic defineProps (), tipe kompleks, props opsional, serta pengetikan emit.
Props dan Emits Bertipe dengan defineProps/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.
Mengetik Masukan dan Keluaran Komponen
Dengan lang="ts", makro defineProps dan defineEmits dapat menerima tipe TypeScript secara langsung. Ini memberikan pemeriksaan saat kompilasi terhadap data yang mengalir masuk dan keluar dari komponen.
Props dari Antarmuka
Berikan tipe kepada generik defineProps. Antarmuka membuat bentuk Props yang kompleks tetap mudah dibaca dan digunakan kembali.
<script setup lang="ts">
interface Props {
title: string
count: number
}
const props = defineProps<Props>()
</script>Literal Tipe Sebaris
Untuk komponen kecil, tipe objek sebaris sudah memadai—tidak diperlukan antarmuka terpisah.
<script setup lang="ts">
const props = defineProps<{
label: string
disabled: boolean
}>()
</script>Properti Opsional dengan ?
Tandai properti sebagai opsional dengan ?. Props opsional diberi tipe T | undefined dan komponen induk boleh mengabaikannya.
<script setup lang="ts">
interface Props {
title: string
subtitle?: string
}
const props = defineProps<Props>()
</script>Tipe Props Kompleks
Props dapat berupa larik, gabungan tipe, atau bentuk objek—apa pun yang dapat dinyatakan TypeScript.
<script setup lang="ts">
interface Props {
items: string[]
size: 'sm' | 'md' | 'lg'
user: { id: number; name: string }
}
const props = defineProps<Props>()
</script>Nilai Bawaan dengan withDefaults
Bentuk yang hanya berisi tipe tidak dapat memuat nilai bawaan, jadi bungkus dengan withDefaults. Argumen kedua memetakan nama Props ke nilai bawaannya.
<script setup lang="ts">
const props = withDefaults(defineProps<{
size?: string
count?: number
}>(), {
size: 'md',
count: 0
})
</script>Nilai Bawaan untuk Objek dan Larik
Nilai bawaan objek dan larik harus dikembalikan dari fungsi pabrik, seperti pada API Opsi, agar satu instans tidak digunakan bersama oleh beberapa komponen.
withDefaults(defineProps<{
tags?: string[]
}>(), {
tags: () => []
})Mendeklarasikan Emit Bertipe
defineEmits dapat menerima tipe yang mencantumkan setiap peristiwa dan muatannya sebagai tanda tangan pemanggilan. Ini menemukan tipe muatan yang salah saat kompilasi.
<script setup lang="ts">
const emit = defineEmits<{
(e: 'change', value: string): void
(e: 'delete', id: number): void
}>()
</script>Mengirim Muatan Bertipe
Sekarang emit hanya menerima nama peristiwa yang valid dan tipe muatan yang sesuai. Meneruskan angka ketika teks diharapkan akan menghasilkan kesalahan kompilasi.
function rename(name: string) {
emit('change', name) // ok
// emit('change', 123) // type error
}Sintaks Tupel Bernama
Vue 3.3+ mendukung bentuk objek singkat, dengan setiap peristiwa dipetakan ke sebuah tupel yang berisi tipe argumennya—lebih rapi daripada tanda tangan pemanggilan.
<script setup lang="ts">
const emit = defineEmits<{
change: [value: string]
delete: [id: number]
}>()
</script>Props dan Emit Bersama
Komponen bertipe yang umum mendeklarasikan keduanya: masukan melalui defineProps dan keluaran melalui defineEmits, yang diperiksa sepenuhnya dari awal hingga akhir.
<script setup lang="ts">
defineProps<{ modelValue: string }>()
const emit = defineEmits<{
'update:modelValue': [value: string]
}>()
</script>Pemeriksaan Singkat
Uji pengetahuan Anda tentang Props dan emit bertipe.
Ringkasan
Anda telah mempelajari masukan dan keluaran komponen bertipe:
- Berikan antarmuka atau tipe sebaris kepada defineProps<T>().
- Gunakan ? untuk Props opsional dan withDefaults untuk nilai bawaan (gunakan fungsi pabrik untuk objek/larik).
- defineEmits<T>() memberi tipe pada nama peristiwa dan muatannya.
- Bentuk tupel (event: [payload]) adalah sintaks singkat modern.
Pertanyaan yang Sering Diajukan
Apakah pelajaran “Props dan Emits Bertipe dengan defineProps/defineEmits” gratis?
Ya — teks lengkap “Props dan Emits Bertipe dengan defineProps/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 “Props dan Emits Bertipe dengan defineProps/defineEmits”?
Generic defineProps (), tipe kompleks, props opsional, serta pengetikan emit. 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 “Props dan Emits Bertipe dengan defineProps/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
- Menyiapkan TypeScript dalam Proyek Vue
- Props dan Emits Bertipe dengan defineProps/defineEmits
- Mengetik Composable dan Ref
- Komponen Vue Generik