Typede props og emits med defineProps/defineEmits
Generisk defineProps (), komplekse typer, valgfrie props og typing av emit.
Typede props og emits med defineProps/defineEmits er en gratis leksjon i Vue Academy på CoddyKit. Dette er leksjon 2 av 4. Du kan lese valgfritt 3 leksjoner fra denne læringsstien gratis i sin helhet – deretter låser CoddyKit PRO opp alle leksjoner, samt praktisk øving med en innebygd kodeeditor og en AI-veileder som er tilgjengelig døgnet rundt. Den er en del av læringsløpet i Vue Academy, og fremdriften din synkroniseres mellom nettet og CoddyKit-appen. Kurset i Vue Academy inneholder totalt 4 leksjoner.
Skrive typer for komponenters inn- og utdata
Med lang="ts" godtar makroene defineProps og defineEmits TypeScript-typer direkte. Dette gir kompileringstidskontroller av hvilke data som går inn i og ut av en komponent.
Props fra et grensesnitt
Send en type til generikken i defineProps. Et interface gjør komplekse prop-strukturer lesbare og gjenbrukbare.
<script setup lang="ts">
interface Props {
title: string
count: number
}
const props = defineProps<Props>()
</script>Innebygde typeobjekter
For små komponenter er en innebygd objekttype tilstrekkelig — det er ikke nødvendig med et separat grensesnitt.
<script setup lang="ts">
const props = defineProps<{
label: string
disabled: boolean
}>()
</script>Valgfrie egenskaper med ?
Marker en egenskap som valgfri med ?. Valgfrie props typesettes som T | undefined, og den overordnede komponenten kan utelate dem.
<script setup lang="ts">
interface Props {
title: string
subtitle?: string
}
const props = defineProps<Props>()
</script>Komplekse prop-typer
Props kan være matriser, unioner eller objektstrukturer — alt TypeScript kan uttrykke.
<script setup lang="ts">
interface Props {
items: string[]
size: 'sm' | 'md' | 'lg'
user: { id: number; name: string }
}
const props = defineProps<Props>()
</script>Standardverdier med withDefaults
Den typebaserte formen kan ikke inneholde standardverdier, så pakk den inn i withDefaults. Det andre argumentet knytter prop-navn til standardverdier.
<script setup lang="ts">
const props = withDefaults(defineProps<{
size?: string
count?: number
}>(), {
size: 'md',
count: 0
})
</script>Standardverdier for objekter og matriser
Standardverdier for objekter og matriser må returneres fra en fabrikkfunksjon, akkurat som i Options API, for å unngå at én instans deles mellom komponenter.
withDefaults(defineProps<{
tags?: string[]
}>(), {
tags: () => []
})Deklarere typede emits
defineEmits kan ta en type som lister hver hendelse og tilhørende nyttelast som en kallsignatur. Dette oppdager feil nyttelasttyper ved kompilering.
<script setup lang="ts">
const emit = defineEmits<{
(e: 'change', value: string): void
(e: 'delete', id: number): void
}>()
</script>Sende ut typede nyttelaster
emit godtar nå bare gyldige hendelsesnavn og samsvarende nyttelasttyper. Hvis De sender et tall der en streng forventes, oppstår det en kompileringsfeil.
function rename(name: string) {
emit('change', name) // ok
// emit('change', 123) // type error
}Syntaksen med navngitte tupler
Vue 3.3+ støtter en kortere objektform der hver hendelse knyttes til en tuple av argumenttypene — ryddigere enn kallsignaturer.
<script setup lang="ts">
const emit = defineEmits<{
change: [value: string]
delete: [id: number]
}>()
</script>Props og emits sammen
En typisk typet komponent deklarerer begge deler: inndata via defineProps og utdata via defineEmits, med full kontroll hele veien.
<script setup lang="ts">
defineProps<{ modelValue: string }>()
const emit = defineEmits<{
'update:modelValue': [value: string]
}>()
</script>Hurtigkontroll
Test kunnskapen Deres om typede props og emits.
Oppsummering
De lærte om typede komponenters inn- og utdata:
- Send et grensesnitt eller en innebygd type til defineProps<T>().
- Bruk ? for valgfrie props og withDefaults for standardverdier (fabrikkfunksjon for objekter/matriser).
- defineEmits<T>() typesetter hendelsesnavn og nyttelaster.
- Tuple-formen (event: [payload]) er den moderne kortformen.
Lær deg HTML med en AI-veileder – gratis
Skriv og kjør ekte kode i nettleseren, få umiddelbar hjelp fra en AI-veileder som er tilgjengelig døgnet rundt, og fortsett der du slapp – på nettet eller i appen.
- Kurs
- 42
- Leksjoner
- 156
Ofte stilte spørsmål
Er leksjonen «Typede props og emits med defineProps/defineEmits» gratis?
Ja – du kan lese valgfritt 3 av leksjonene i læringsstien Vue Academy, inkludert «Typede props og emits med defineProps/defineEmits», gratis i sin helhet her på nettet. Deretter låser CoddyKit PRO opp alle leksjoner, samt interaktiv øving med en innebygd kodeeditor og en AI-veileder som er tilgjengelig døgnet rundt. Kurset i Vue Academy inneholder totalt 4 leksjoner.
Hva lærer jeg i «Typede props og emits med defineProps/defineEmits»?
Generisk defineProps (), komplekse typer, valgfrie props og typing av emit. Du øver på Vue Academy med praktisk kode som du kjører direkte i nettleseren, mens en AI-veileder som er tilgjengelig døgnet rundt, svarer på spørsmålene dine mens du jobber deg gjennom leksjonen.
Trenger jeg erfaring for å begynne med Vue Academy?
Ingen tidligere erfaring er nødvendig. Vue Academy på CoddyKit er lagt opp for både nybegynnere og viderekomne, så De kan begynne her eller helt fra start og lære i Deres eget tempo. Dette er leksjon 2 av 4.
Hvor lang tid tar leksjonen «Typede props og emits med defineProps/defineEmits»?
De fleste CoddyKit-leksjoner tar omtrent 5–10 minutter. Hver leksjon er kort og interaktiv, slik at De gjør jevne fremskritt og kan fortsette akkurat der De slapp – både på nettet og i appen.
Kan jeg skrive og kjøre kode i denne Vue Academy-leksjonen?
Ja. Alle Vue Academy-leksjoner har en innebygd kodeeditor, slik at De kan skrive og kjøre ekte kode direkte i nettleseren og få umiddelbar tilbakemelding fra AI – uten lokal konfigurering.
Alle leksjonene i dette kurset
- Konfigurere TypeScript i Vue-prosjekter
- Typede props og emits med defineProps/defineEmits
- Typing av composables og refs
- Generiske Vue-komponenter