Vue Academy · leksjon

defineProps og defineEmits

Typede props med defineProps (), defineEmits () og withDefaults() for standardverdier.

Leksjon 2 av 413 trinn

defineProps og 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.

Kommunikasjon mellom komponenter

Komponenter mottar data gjennom props og sender meldinger opp gjennom events. I <script setup> deklarerer du disse med makroene defineProps og defineEmits.

defineProps med runtime-syntaks

Du kan deklarere props med et runtime-objekt, akkurat som i Options API. Dette fungerer både i JS og TS.

<script setup>
const props = defineProps({
  title: String,
  count: Number
})
console.log(props.title)
</script>

defineProps med en TypeScript-generisk type

I TypeScript kan du angi en type via den generiske typen for å få ryddigere og typesjekkede props. Kompilatoren gjør typen om til deklarasjoner ved kjøring.

<script setup lang="ts">
const props = defineProps<{
  title: string
  count: number
}>()
</script>

Valgfrie props med ?

Legg til et spørsmålstegn etter en egenskap i typen for å gjøre den valgfri. Valgfrie props kan være undefined hvis forelderen ikke sender dem.

<script setup lang="ts">
const props = defineProps<{
  title: string
  subtitle?: string
}>()
</script>

Standardverdier med withDefaults

Den typebaserte varianten har ikke noe sted for standardverdier, så Vue tilbyr withDefaults. Pakk inn defineProps og oppgi et objekt med standardverdier.

<script setup lang="ts">
const props = withDefaults(defineProps<{
  title?: string
  count?: number
}>(), {
  title: 'Untitled',
  count: 0
})
</script>

Bruke props i malen

Props er reaktive. Referer direkte til dem i malen, eller via props.x i script.

<template>
  <h1>{{ title }}</h1>
  <p>Count: {{ count }}</p>
</template>

Props er skrivebeskyttede

Endre aldri en prop inne i barnet. Props flyter én vei: fra forelder til barn. Hvis du trenger en lokal, redigerbar kopi, kan du avlede den med computed eller en lokal ref.

Deklarere hendelser med defineEmits

defineEmits deklarerer hvilke hendelser en komponent kan utløse. Runtime-varianten tar imot en matrise med hendelsesnavn.

<script setup>
const emit = defineEmits(['submit', 'cancel'])
function onSave() { emit('submit') }
</script>

Typesatte hendelser med TypeScript

Den typebaserte varianten lar deg angi både hendelsesnavn og nyttelasttyper. Dette fanger opp feil som å utløse en hendelse med feil argumenttype.

<script setup lang="ts">
const emit = defineEmits<{
  (e: 'submit', payload: string): void
  (e: 'cancel'): void
}>()
</script>

Utløse en hendelse med nyttelast

Kall emit med hendelsesnavnet og eventuelle data. Forelderen lytter med @submit og mottar nyttelasten.

<script setup lang="ts">
const emit = defineEmits<{ (e: 'submit', value: string): void }>()
function send() { emit('submit', 'hello') }
</script>

Sette det hele sammen

Et barn mottar en title-prop og utløser en submit-hendelse. Forelderen reagerer på begge deler – ryddige, typesatte, énveis data sammen med eksplisitte hendelser.

<script setup lang="ts">
defineProps<{ title: string }>()
const emit = defineEmits<{ (e: 'submit', v: string): void }>()
</script>

Hurtigsjekk

Sjekk hvor godt du forstår props og emits.

Besvar den i den interaktive leksjonen

Oppsummering

Du har lært om komponenters inn- og utdata i <script setup>:

defineProps deklarerer inndata (runtime-objekt eller TS-generisk type).
Bruk ? for valgfrie props og withDefaults for standardverdier.
Props er skrivebeskyttede og går én vei.
defineEmits deklarerer hendelser, med valgfritt typesatte navn og nyttelaster.

Gratis å komme i gang

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

Start læringen gratis Se hele kurset

Ofte stilte spørsmål

Er leksjonen «defineProps og defineEmits» gratis?

Ja – du kan lese valgfritt 3 av leksjonene i læringsstien Vue Academy, inkludert «defineProps og 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 «defineProps og defineEmits»?

Typede props med defineProps (), defineEmits () og withDefaults() for standardverdier. 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 «defineProps og 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

Introduksjon til script setup
defineProps og defineEmits
defineExpose og useAttrs
Importere og bruke composables i script setup

← Tilbake til Vue Academy