Komponen Vue Generik
defineComponent dengan generik, persediaan skrip generik, props slot bertipa.
Komponen Vue Generik ialah pelajaran Vue Academy percuma di CoddyKit. Ini ialah pelajaran 4 daripada 4. Sebanyak 3 pelajaran dalam laluan pembelajaran ini boleh dibaca sepenuhnya secara percuma — selepas itu, CoddyKit PRO membuka akses kepada semua pelajaran, serta latihan praktikal dengan penyunting kod terbina dalam dan tutor kecerdasan buatan yang tersedia 24/7. Pelajaran ini merupakan sebahagian daripada laluan pembelajaran Vue Academy, dan kemajuan anda disegerakkan merentas web serta aplikasi CoddyKit. Kursus Vue Academy merangkumi sejumlah 4 pelajaran.
Komponen Generik
Sesetengah komponen berfungsi dengan apa-apa jenis data — senarai berjenis, pilihan atau jadual. Vue 3.3 membolehkan anda menulis komponen generik supaya pengguna mengekalkan inferens jenis penuh dan tidak kembali kepada any.
Atribut Generik
Tambahkan atribut generic pada <script setup>. Atribut ini mengisytiharkan parameter jenis yang tersedia di seluruh skrip, sama seperti fungsi generik.
<script setup lang="ts" generic="T">
// T can now be used below
</script>Props Generik
Gunakan parameter jenis dalam defineProps. Dalam contoh ini, komponen menerima tatasusunan daripada apa-apa jenis T.
<script setup lang="ts" generic="T">
defineProps<{
items: T[]
selected: T
}>()
</script>Inferens Jenis di Lokasi Panggilan
Apabila komponen induk menghantar items, TypeScript membuat inferens T daripada data tersebut — jenis eksplisit tidak diperlukan. Jika anda menghantar nombor, selected mestilah nombor.
<MyList :items="[1, 2, 3]" :selected="2" />
<!-- T inferred as number -->Mengehadkan Jenis
Tambahkan extends untuk mewajibkan bentuk tertentu. Dalam contoh ini, T mesti mempunyai id, yang berguna untuk senarai dengan kunci.
<script setup lang="ts" generic="T extends { id: number }">
defineProps<{ items: T[] }>()
</script>Berbilang Parameter Jenis
Isytiharkan beberapa parameter yang dipisahkan dengan koma, sama seperti tandatangan fungsi generik.
<script setup lang="ts" generic="T, K extends keyof T">
defineProps<{
items: T[]
field: K
}>()
</script>Props Slot Berjenis
Gabungkan generik dengan slot berjenis supaya kandungan slot turut mempunyai jenis. Isytiharkan tandatangan slot dengan defineSlots.
<script setup lang="ts" generic="T">
defineProps<{ items: T[] }>()
defineSlots<{
default(props: { item: T }): any
}>()
</script>Memaparkan Slot Generik
Dalam templat, hantar setiap item kepada slot. Komponen induk menerima props slot yang mempunyai jenis yang betul.
<template>
<ul>
<li v-for="item in items" :key="String(item)">
<slot :item="item" />
</li>
</ul>
</template>Menggunakan Inferens
Komponen induk mendapat item berjenis dalam skop slot secara automatik — berdasarkan tatasusunan yang dihantarnya.
<MyList :items="users">
<template #default="{ item }">
{{ item.name }}
</template>
</MyList>Emisi Generik
Parameter jenis turut mengalir ke dalam defineEmits, jadi muatan peristiwa boleh membawa jenis generik.
<script setup lang="ts" generic="T">
defineProps<{ items: T[] }>()
const emit = defineEmits<{
select: [item: T]
}>()
</script>Bila Perlu Menggunakan Generik
Gunakan komponen generik apabila komponen benar-benar tidak bergantung pada jenis dan anda mahu inferens mengalir melaluinya — senarai, jadual atau pelengkapan automatik. Untuk bentuk data yang tetap, komponen berjenis biasa lebih mudah.
Semakan Pantas
Uji pengetahuan anda tentang komponen generik.
Imbas Kembali
Anda telah mempelajari komponen generik:
- Isytiharkan parameter jenis dengan atribut generic pada script setup.
- Gunakannya dalam defineProps untuk data yang tidak bergantung pada jenis seperti items: T[].
- Hadkan dengan extends dan tambahkan berbilang parameter.
- Taip props slot dengan defineSlots supaya pengguna mendapat inferens penuh.
Pelajari HTML dengan tutor kecerdasan buatan — percuma
Tulis dan jalankan kod sebenar dalam pelayar anda, dapatkan bantuan segera daripada tutor kecerdasan buatan yang tersedia 24/7, dan sambung semula dari tempat anda berhenti di web atau dalam aplikasi.
- Kursus
- 42
- Pelajaran
- 156
Soalan Lazim
Adakah pelajaran “Komponen Vue Generik” percuma?
Ya — sebanyak 3 pelajaran dalam laluan pembelajaran Vue Academy, termasuk “Komponen Vue Generik”, boleh dibaca sepenuhnya secara percuma di web ini. Selepas itu, CoddyKit PRO membuka akses kepada semua pelajaran, serta latihan interaktif dengan penyunting kod terbina dalam dan tutor kecerdasan buatan yang tersedia 24/7. Kursus Vue Academy merangkumi sejumlah 4 pelajaran.
Apakah yang akan saya pelajari dalam “Komponen Vue Generik”?
defineComponent dengan generik, persediaan skrip generik, props slot bertipa. Anda berlatih Vue Academy menggunakan kod praktikal yang dijalankan terus dalam pelayar, manakala tutor kecerdasan buatan 24/7 menjawab soalan anda semasa anda mengikuti pelajaran.
Adakah saya memerlukan pengalaman untuk memulakan Vue Academy?
Tiada pengalaman terdahulu diperlukan. Pembelajaran Vue Academy di CoddyKit disusun untuk pelajar daripada peringkat pemula hingga lanjutan, jadi anda boleh bermula di sini atau dari awal dan belajar mengikut kadar anda sendiri. Ini ialah pelajaran 4 daripada 4.
Berapa lamakah pelajaran “Komponen Vue Generik” diambil?
Kebanyakan pelajaran CoddyKit mengambil masa kira-kira 5–10 minit. Setiap pelajaran ringkas dan interaktif, jadi anda boleh membuat kemajuan secara berterusan dan menyambung tepat dari tempat anda berhenti di web atau aplikasi.
Bolehkah saya menulis dan menjalankan kod dalam pelajaran Vue Academy ini?
Ya. Setiap pelajaran Vue Academy menyertakan penyunting kod terbina dalam, jadi anda boleh menulis dan menjalankan kod sebenar terus dalam pelayar serta menerima maklum balas kecerdasan buatan serta-merta — tanpa memerlukan persediaan setempat.
Semua pelajaran dalam kursus ini
- Persediaan TypeScript dalam Projek Vue
- Props dan Emit Bertipa dengan defineProps/defineEmits
- Menaip Komposabel dan Ref
- Komponen Vue Generik