Props og brugerdefinerede hændelser
Send data ned med props, og send hændelser op til overordnede komponenter
Props og brugerdefinerede hændelser er en gratis Vue Academy-lektion på CoddyKit. Dette er lektion 2 af 3. 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 3 lektioner i alt.
Kommunikation mellem overordnet og underordnet komponent
Komponenter kommunikerer i to retninger:
- Props sender data ned fra den overordnede komponent til den underordnede
- Hændelser sender beskeder op fra den underordnede komponent til den overordnede
Dette dataflow i én retning gør apps forudsigelige.
Deklarering af props
En underordnet komponent deklarerer de props, den accepterer. I script setup skal du bruge defineProps.
<script setup>
const props = defineProps(['title', 'count'])
</script>
<template>
<h2>{{ title }}</h2>
<p>{{ count }}</p>
</template>Props med typer
Deklarer props som et objekt for at angive typer til validering.
<script setup>
defineProps({
title: String,
count: Number,
isActive: Boolean
})
</script>Props med standardværdier og påkrævede props
Du kan markere props som required og angive default-værdier.
<script setup>
defineProps({
title: {
type: String,
required: true
},
count: {
type: Number,
default: 0
}
})
</script>Overførsel af props fra en overordnet komponent
Den overordnede komponent sender data som attributter. Brug : til at binde dynamiske værdier.
<template>
<ProductCard
title="Coffee Mug"
:count="stock"
:is-active="available"
/>
</template>
<!-- static string vs bound expression -->Navngivningskonvention for props
Deklarer props i camelCase i JS, og angiv dem i kebab-case i skabeloner.
- JS-prop: isActive
- Attribut i skabelonen: :is-active
Vue konverterer automatisk mellem de to former.
Props er skrivebeskyttede
En underordnet komponent må ikke ændre sine props direkte.
- Props bevæger sig kun én vej: nedad
- Hvis du ændrer dem, bliver koden mindre forudsigelig, og der udløses advarsler
- Hvis fælles data skal ændres, skal du udløse en hændelse, så den overordnede komponent opdaterer dataene
Deklarering af udløste hændelser
En underordnet komponent deklarerer de hændelser, den udløser, med defineEmits.
<script setup>
const emit = defineEmits(['increment', 'delete'])
</script>Udløsning af en hændelse
Kald funktionen emit for at sende en hændelse op, eventuelt med en nyttelast.
<script setup>
const emit = defineEmits(['add'])
function handleClick() {
emit("add", { id: 1, name: "Item" })
}
</script>
<template>
<button @click="handleClick">Add</button>
</template>Udløsning i Options API
I Options API kalder du i stedet this.$emit.
export default {
emits: ["save"],
methods: {
onSave() {
this.$emit("save", this.formData)
}
}
}Den overordnede komponents lytning efter hændelser
Den overordnede komponent lytter med @event-name og modtager nyttelasten.
<template>
<TodoItem
:task="task"
@delete="removeTask"
@add="onAdd"
/>
</template>
<script setup>
function onAdd(item) {
console.log("Added:", item.name)
}
</script>Hurtigt tjek
Test din forståelse af props og hændelser.
Opsummering: Props og hændelser
Du har lært om kommunikation mellem komponenter:
- defineProps deklarerer props med typer og standardværdier
- Props bevæger sig nedad og er skrivebeskyttede
- defineEmits deklarerer hændelser
- emit("name", payload) sender hændelser opad
- Den overordnede komponent lytter med @event
Næste emne: slots og scoped slots.
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 “Props og brugerdefinerede hændelser” gratis?
Ja — alle 3 lektioner i læringssporet Vue Academy, inklusive “Props og brugerdefinerede hændelser”, 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 3 lektioner i alt.
Hvad lærer jeg i “Props og brugerdefinerede hændelser”?
Send data ned med props, og send hændelser op til overordnede komponenter 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 3.
Hvor lang tid tager lektionen “Props og brugerdefinerede hændelser”?
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
- Oprettelse og registrering af komponenter
- Props og brugerdefinerede hændelser
- Slots og scoped slots