Frontend Academy · Lekcja

Propsy i emitowanie zdarzeń komponentów

Proszę przekazywać dane w dół za pomocą defineProps, emitować zdarzenia w górę przez defineEmits oraz walidować propsy za pomocą ograniczeń type i required.

Propsy i emitowanie zdarzeń komponentów to bezpłatna lekcja Frontend Academy na CoddyKit. To lekcja 4 z 4. Możesz przeczytać całą lekcję poniżej za darmo — a potem ćwiczyć ją interaktywnie w przeglądarce z wbudowanym edytorem kodu i tutorem AI dostępnym 24/7. To część ścieżki edukacyjnej Frontend Academy, a Twój postęp synchronizuje się między webem a aplikacją CoddyKit. Kurs Frontend Academy zawiera 4 lekcji w sumie.

Propsy w Vue 3

Propsy przekazują dane z komponentu nadrzędnego do potomnego. W <script setup> proszę używać defineProps(), aby je zadeklarować. Propsy są tylko do odczytu w komponencie potomnym — nie należy ich bezpośrednio modyfikować.

<script setup lang="ts">
const props = defineProps<{
  title: string;
  count?: number;
  variant?: 'primary' | 'secondary';
}>();
</script>

<template>
  <h2>{{ title }} ({{ count ?? 0 }})</h2>
</template>

withDefaults dla wartości domyślnych propsów

Proszę opakować defineProps() w withDefaults(), aby podać wartości domyślne.

<script setup lang="ts">
const props = withDefaults(defineProps<{
  count?: number;
  variant?: 'primary' | 'secondary';
}>(), {
  count: 0,
  variant: 'primary'
});
</script>

Przekazywanie propsów w szablonie

Wartości statyczne należy przekazywać jako zwykłe atrybuty. Wartości dynamiczne należy przekazywać za pomocą v-bind (:). Atrybuty typu boolean należy przekazywać przez samą obecność, bez wartości.

<MyButton title="Submit" :count="activeCount" variant="primary" />
<Toggle :disabled="isLoading" />

Emits — komunikacja od komponentu potomnego do nadrzędnego

Komponenty potomne komunikują się w górę, emitując zdarzenia. Proszę używać defineEmits(), aby zadeklarować zdarzenia, które komponent może emitować, a następnie wywoływać zwróconą funkcję emit.

<script setup lang="ts">
const emit = defineEmits<{
  update: [value: string];
  close: [];
  submit: [data: FormData];
}>();

function handleSubmit(data: FormData) {
  emit('submit', data); // fire the event
}
</script>

Nasłuchiwanie zdarzeń emitowanych w komponencie nadrzędnym

Proszę używać @eventName w szablonie, aby nasłuchiwać niestandardowych zdarzeń z komponentów potomnych.

<SearchInput
  @update="searchTerm = $event"
  @submit="handleSearch"
/>

v-model z komponentami niestandardowymi

v-model na komponencie niestandardowym jest skrótem dla :modelValue + @update:modelValue. Komponent musi przyjmować ten prop i emitować zdarzenie aktualizacji.

<!-- Parent: -->
<MyInput v-model="email" />

<!-- MyInput.vue: -->
<script setup lang="ts">
defineProps<{ modelValue: string }>();
const emit = defineEmits<{ 'update:modelValue': [string] }>();
</script>

<template>
  <input :value="modelValue" @input="emit('update:modelValue', ($event.target as HTMLInputElement).value)" />
</template>

Wiele wiązań v-model

Vue 3 obsługuje wiele wiązań v-model w jednym komponencie za pomocą nazwanych modyfikatorów.

<UserForm v-model:firstName="user.firstName" v-model:lastName="user.lastName" />

Walidacja propsów

W Options API lub deklaracji propsów w czasie wykonywania proszę dodać ograniczenia type, required i validator. Oparte na TypeScript defineProps() zapewnia to podczas kompilacji.

Prop a dane — przepływ jednokierunkowy

Vue wymusza jednokierunkowy przepływ danych: propsy płyną z komponentu nadrzędnego do potomnego, a zdarzenia z potomnego do nadrzędnego. Jeśli komponent potomny musi zmodyfikować dane, emituje zdarzenie, a komponent nadrzędny obsługuje aktualizację.

Sloty jako alternatywa dla propsów

W przypadku treści, która powinna zawierać HTML lub komponenty, a nie tylko dane, proszę używać slotów. Komponent nadrzędny dostarcza treść wewnątrz znaczników komponentu, a komponent potomny renderuje ją za pomocą <slot />.

<!-- Parent: -->
<Card title="Hello">
  <p>This content goes in the default slot.</p>
</Card>

<!-- Card.vue: -->
<template>
  <div class="card">
    <h2>{{ title }}</h2>
    <slot />  <!-- renders the p tag -->
  </div>
</template>

Szybkie sprawdzenie

Jak komponent potomny Vue komunikuje zdarzenie z powrotem do komponentu nadrzędnego?

Podsumowanie: propsy i emits

defineProps służy do typowanych deklaracji propsów. withDefaults służy do definiowania wartości domyślnych. Propsy są tylko do odczytu w komponentach potomnych. defineEmits służy do deklarowania i typowania emitowanych zdarzeń. Komponent nadrzędny nasłuchuje za pomocą @eventName. v-model = :modelValue + @update:modelValue. Jednokierunkowy przepływ danych: propsy w dół, zdarzenia w górę. Sloty służą do przekazywania treści i fragmentów szablonu.

Często zadawane pytania

Czy lekcja „Propsy i emitowanie zdarzeń komponentów” jest bezpłatna?

Tak — pełny tekst „Propsy i emitowanie zdarzeń komponentów” jest dostępny za darmo tutaj w sieci. Aby ćwiczyć ją interaktywnie (wbudowany edytor kodu i tutor AI dostępny 24/7) i odblokować resztę kursu Frontend Academy, przejdź na CoddyKit PRO. Kurs Frontend Academy zawiera 4 lekcji w sumie.

Co nauczysz się w „Propsy i emitowanie zdarzeń komponentów”?

Proszę przekazywać dane w dół za pomocą defineProps, emitować zdarzenia w górę przez defineEmits oraz walidować propsy za pomocą ograniczeń type i required. Ćwiczysz Frontend Academy z praktycznym kodem, który uruchamiasz bezpośrednio w przeglądarce, a tutor AI dostępny 24/7 odpowiada na Twoje pytania podczas pracy nad lekcją.

Czy potrzebuję doświadczenia, aby zacząć Frontend Academy?

Nie wymagamy żadnego doświadczenia. Frontend Academy w CoddyKit jest strukturyzowany dla początkujących i zaawansowanych użytkowników, więc możesz zacząć tutaj lub od początku i uczyć się w swoim tempie. To lekcja 4 z 4.

Ile czasu zajmuje lekcja „Propsy i emitowanie zdarzeń komponentów”?

Większość lekcji CoddyKit trwa około 5–10 minut. Każda lekcja to mały, interaktywny krok, dzięki czemu robisz systematyczne postępy i zawsze wracasz dokładnie do tego samego miejsca — na webie i w aplikacji.

Czy mogę pisać i uruchamiać kod w tej lekcji Frontend Academy?

Tak. Każda lekcja Frontend Academy zawiera wbudowany edytor kodu, więc piszesz i uruchamiasz prawdziwy kod bezpośrednio w przeglądarce i od razu otrzymujesz sprzężenie zwrotne od AI — bez konfiguracji na komputerze.

Wszystkie lekcje w tym kursie

← Powrót do Frontend Academy