Komponen Vue Generik
defineComponent dengan generic, script setup generik, serta props slot bertipe.
Komponen Vue Generik adalah pelajaran Vue 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 Vue Academy, dan progresmu tersinkronisasi di web dan aplikasi CoddyKit. Kursus Vue Academy mencakup 4 pelajaran total.
Komponen Generik
Beberapa komponen bekerja dengan tipe data apa pun—daftar bertipe, pilihan, atau tabel. Vue 3.3 memungkinkan Anda menulis komponen generik sehingga pengguna tetap mendapatkan inferensi tipe lengkap, alih-alih kembali ke any.
Atribut generic
Tambahkan atribut generic ke <script setup>. Atribut ini mendeklarasikan parameter tipe yang tersedia di seluruh skrip, persis seperti fungsi generik.
<script setup lang="ts" generic="T">
// T can now be used below
</script>Props Generik
Gunakan parameter tipe di dalam defineProps. Di sini, komponen menerima larik dengan tipe apa pun T.
<script setup lang="ts" generic="T">
defineProps<{
items: T[]
selected: T
}>()
</script>Inferensi Tipe di Lokasi Pemanggilan
Saat komponen induk meneruskan items, TypeScript menyimpulkan T dari data tersebut—tidak diperlukan tipe eksplisit. Jika Anda meneruskan angka, selected harus berupa angka.
<MyList :items="[1, 2, 3]" :selected="2" />
<!-- T inferred as number -->Membatasi Tipe
Tambahkan extends untuk mewajibkan bentuk tertentu. Di sini, T harus memiliki id, yang berguna untuk daftar dengan kunci.
<script setup lang="ts" generic="T extends { id: number }">
defineProps<{ items: T[] }>()
</script>Beberapa Parameter Tipe
Deklarasikan beberapa parameter yang dipisahkan dengan koma, seperti pada tanda tangan fungsi generik.
<script setup lang="ts" generic="T, K extends keyof T">
defineProps<{
items: T[]
field: K
}>()
</script>Props Slot Bertipe
Gabungkan generik dengan slot bertipe agar konten slot juga memiliki tipe. Deklarasikan tanda tangan slot dengan defineSlots.
<script setup lang="ts" generic="T">
defineProps<{ items: T[] }>()
defineSlots<{
default(props: { item: T }): any
}>()
</script>Merender Slot Generik
Di dalam templat, teruskan setiap item ke slot. Komponen induk menerima Props slot dengan tipe yang benar.
<template>
<ul>
<li v-for="item in items" :key="String(item)">
<slot :item="item" />
</li>
</ul>
</template>Menggunakan Inferensi
Komponen induk otomatis mendapatkan item bertipe dalam cakupan slot—berdasarkan larik yang diteruskannya.
<MyList :items="users">
<template #default="{ item }">
{{ item.name }}
</template>
</MyList>Emit Generik
Parameter tipe juga mengalir ke defineEmits, sehingga muatan peristiwa dapat membawa tipe generik.
<script setup lang="ts" generic="T">
defineProps<{ items: T[] }>()
const emit = defineEmits<{
select: [item: T]
}>()
</script>Kapan Menggunakan Tipe Generik
Gunakan komponen generik ketika komponen benar-benar tidak bergantung pada tipe dan Anda ingin inferensi mengalir melaluinya—misalnya daftar, tabel, atau pelengkapan otomatis. Untuk bentuk data yang tetap, komponen bertipe biasa lebih sederhana.
Pemeriksaan Singkat
Uji pengetahuan Anda tentang komponen generik.
Ringkasan
Anda telah mempelajari komponen generik:
- Deklarasikan parameter tipe dengan atribut generic pada script setup.
- Gunakan parameter tersebut di defineProps untuk data yang tidak bergantung pada tipe, seperti items: T[].
- Batasi dengan extends dan tambahkan beberapa parameter.
- Beri tipe pada Props slot dengan defineSlots agar pengguna mendapatkan inferensi lengkap.
Belajar HTML dengan tutor AI — gratis
Tulis dan jalankan kode asli di browser kamu, dapatkan bantuan instan dari tutor AI 24/7, dan lanjutkan di mana kamu tinggalkan di web atau aplikasi.
- Kursus
- 42
- Pelajaran
- 156
Pertanyaan yang Sering Diajukan
Apakah pelajaran “Komponen Vue Generik” gratis?
Ya — teks lengkap “Komponen Vue Generik” 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 “Komponen Vue Generik”?
defineComponent dengan generic, script setup generik, serta props slot bertipe. 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 4 dari 4.
Berapa lama pelajaran “Komponen Vue Generik” 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