Typede props og emits med defineProps/defineEmits
Generisk defineProps (), komplekse typer, valgfrie props og typning af emits
Typede props og emits med defineProps/defineEmits er en gratis Vue Academy-lektion på CoddyKit. Dette er lektion 2 af 4. Du kan læse alle 3 lektioner i dette læringsspor gratis i deres fulde længde — derefter låser CoddyKit PRO alle lektioner op samt praktiske øvelser med en indbygget kodeeditor og en AI-underviser døgnet rundt. Den er en del af læringsforløbet i Vue Academy, og dine fremskridt synkroniseres på tværs af nettet og CoddyKit-appen. Vue Academy-kurset indeholder 4 lektioner i alt.
Typeangivelse for komponenters inddata og uddata
Med lang="ts" accepterer makroerne defineProps og defineEmits TypeScript-typer direkte. Det giver kontroller ved kompilering af, hvilke data der strømmer ind i og ud af en komponent.
Props fra en grænseflade
Giv den generiske parameter i defineProps en type. En grænseflade gør komplekse prop-strukturer nemmere at læse og genbruge.
<script setup lang="ts">
interface Props {
title: string
count: number
}
const props = defineProps<Props>()
</script>Indlejrede type-litteraler
For små komponenter er en indlejret objekttype fin — der er ikke brug for en separat grænseflade.
<script setup lang="ts">
const props = defineProps<{
label: string
disabled: boolean
}>()
</script>Valgfrie egenskaber med ?
Markér en egenskab som valgfri med ?. Valgfrie props har typen T | undefined, og den overordnede komponent kan udelade dem.
<script setup lang="ts">
interface Props {
title: string
subtitle?: string
}
const props = defineProps<Props>()
</script>Komplekse prop-typer
Props kan være arrays, unions- eller objektstrukturer — alt, hvad TypeScript kan udtrykke.
<script setup lang="ts">
interface Props {
items: string[]
size: 'sm' | 'md' | 'lg'
user: { id: number; name: string }
}
const props = defineProps<Props>()
</script>Standardværdier med withDefaults
Den typebaserede form kan ikke indeholde standardværdier, så pak den ind i withDefaults. Det andet argument knytter prop-navne til standardværdier.
<script setup lang="ts">
const props = withDefaults(defineProps<{
size?: string
count?: number
}>(), {
size: 'md',
count: 0
})
</script>Standardværdier for objekter og arrays
Standardværdier for objekter og arrays skal returneres fra en fabriksfunktion, ligesom i Options API, for at undgå at dele den samme instans mellem komponenter.
withDefaults(defineProps<{
tags?: string[]
}>(), {
tags: () => []
})Deklarering af typede hændelser
defineEmits kan tage en type, der angiver hver hændelse og dens nyttedata som en kaldesignatur. Det fanger forkerte typer af nyttedata ved kompilering.
<script setup lang="ts">
const emit = defineEmits<{
(e: 'change', value: string): void
(e: 'delete', id: number): void
}>()
</script>Udsendelse af nyttedata med typer
Nu accepterer emit kun gyldige hændelsesnavne og matchende typer af nyttedata. Hvis du sender et tal, hvor der forventes en streng, opstår der en kompileringsfejl.
function rename(name: string) {
emit('change', name) // ok
// emit('change', 123) // type error
}Syntaksen med navngivne tupler
Vue 3.3+ understøtter en kortere objektform, hvor hver hændelse knyttes til en tupel af argumenttyper — mere overskueligt end kaldesignaturer.
<script setup lang="ts">
const emit = defineEmits<{
change: [value: string]
delete: [id: number]
}>()
</script>Props og hændelser sammen
En typisk typet komponent erklærer begge dele: inddata via defineProps og uddata via defineEmits, med fuld kontrol fra ende til anden.
<script setup lang="ts">
defineProps<{ modelValue: string }>()
const emit = defineEmits<{
'update:modelValue': [value: string]
}>()
</script>Hurtig kontrol
Test din viden om props og hændelser med typer.
Opsummering
Du har lært om typet ind- og uddata for komponenter:
- Giv
defineProps<T>()en grænseflade eller en indlejret type. - Brug ? til valgfrie props og withDefaults til standardværdier (en fabriksfunktion til objekter/arrays).
defineEmits<T>()angiver typer for hændelsesnavne og nyttedata.- Tupelformen (event: [payload]) er den moderne korte form.
Lær HTML med en AI-underviser — gratis
Skriv og kør rigtig kode i din browser, få øjeblikkelig hjælp fra en AI-underviser døgnet rundt, og fortsæt, hvor du slap, på web eller i appen.
- Kurser
- 42
- Lektioner
- 156
Ofte stillede spørgsmål
Er lektionen “Typede props og emits med defineProps/defineEmits” gratis?
Ja — alle 3 lektioner i læringssporet Vue Academy, inklusive “Typede props og emits med defineProps/defineEmits”, kan læses gratis i deres fulde længde her på webstedet. Derefter låser CoddyKit PRO alle lektioner op samt interaktive øvelser med en indbygget kodeeditor og en AI-underviser døgnet rundt. Vue Academy-kurset indeholder 4 lektioner i alt.
Hvad lærer jeg i “Typede props og emits med defineProps/defineEmits”?
Generisk defineProps (), komplekse typer, valgfrie props og typning af emits Du øver dig i Vue Academy med praktisk kode, som du kører direkte i browseren, og en AI-vejleder døgnet rundt besvarer dine spørgsmål, mens du arbejder dig gennem lektionen.
Skal jeg have erfaring for at begynde på Vue Academy?
Der kræves ingen tidligere erfaring. Vue Academy på CoddyKit er tilrettelagt for både begyndere og øvede, så du kan starte her eller fra begyndelsen og lære i dit eget tempo. Dette er lektion 2 af 4.
Hvor lang tid tager lektionen “Typede props og emits med defineProps/defineEmits”?
De fleste CoddyKit-lektioner tager cirka 5–10 minutter. Hver lektion er kort og interaktiv, så du gør løbende fremskridt og kan fortsætte, hvor du slap – på både web og app.
Kan jeg skrive og køre kode i denne Vue Academy-lektion?
Ja. Alle Vue Academy-lektioner har en indbygget kodeeditor, så du kan skrive og køre rigtig kode direkte i din browser og få øjeblikkelig feedback fra AI – uden lokal opsætning.
Alle lektioner i dette kursus
- Opsætning af TypeScript i Vue-projekter
- Typede props og emits med defineProps/defineEmits
- Typning af composables og refs
- Generiske Vue-komponenter