0Pricing
Vue Academy · Lekcja

defineProps i defineEmits

Typowane właściwości za pomocą defineProps (), defineEmits (), withDefaults() dla wartości domyślnych.

defineProps i defineEmits to bezpłatna lekcja Vue Academy na CoddyKit. To lekcja 2 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 Vue Academy, a Twój postęp synchronizuje się między webem a aplikacją CoddyKit. Kurs Vue Academy zawiera 4 lekcji w sumie.

Komunikacja między komponentami

Komponenty otrzymują dane za pośrednictwem props i wysyłają komunikaty w górę za pośrednictwem zdarzeń. W <script setup> deklaruje się je za pomocą makr defineProps i defineEmits.

defineProps w wersji opartej na czasie działania

Props można deklarować za pomocą obiektu używanego w czasie działania, podobnie jak w Options API. Działa to zarówno w JS, jak i w TS.

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

defineProps z generykiem TypeScriptu

W TypeScript można przekazać typ za pomocą generyku, aby uzyskać czytelniejsze props z kontrolą typów. Kompilator przekształca typ w deklaracje używane w czasie działania.

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

Opcjonalne props z użyciem ?

Dodaj znak zapytania do właściwości w typie, aby uczynić ją opcjonalną. Opcjonalne props mogą mieć wartość undefined, jeśli rodzic ich nie przekaże.

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

Wartości domyślne za pomocą withDefaults

Wersja oparta na typach nie udostępnia miejsca na wartości domyślne, dlatego Vue oferuje withDefaults. Owiń nim defineProps i przekaż obiekt wartości domyślnych.

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

Używanie props w szablonie

Props są reaktywne. Odwołuj się do nich bezpośrednio w szablonie albo używaj ich w skrypcie za pomocą props.x.

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

Props są tylko do odczytu

Nigdy nie modyfikuj props wewnątrz komponentu potomnego. Props przepływają tylko w jednym kierunku: od rodzica do komponentu potomnego. Jeśli potrzebujesz lokalnej, edytowalnej kopii, utwórz ją za pomocą computed lub lokalnego ref.

Deklarowanie zdarzeń za pomocą defineEmits

defineEmits deklaruje zdarzenia, które komponent może emitować. Wersja używana w czasie działania przyjmuje tablicę nazw zdarzeń.

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

Typowane zdarzenia w TypeScript

Wersja oparta na typach pozwala określić zarówno nazwy zdarzeń, jak i typy ich danych. Dzięki temu wykrywane są błędy, takie jak emitowanie argumentu niewłaściwego typu.

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

Emitowanie danych ze zdarzeniem

Wywołaj emit, podając nazwę zdarzenia i dowolne dane. Rodzic nasłuchuje za pomocą @submit i otrzymuje przekazane dane.

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

Połączenie wszystkich elementów

Komponent potomny otrzymuje prop title i emituje zdarzenie submit. Rodzic reaguje na oba elementy — otrzymujesz czysty, typowany, jednokierunkowy przepływ danych oraz jawne zdarzenia.

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

Szybkie sprawdzenie

Sprawdź swoją wiedzę o props i emits.

Podsumowanie

Poznałeś wejście i wyjście komponentu w <script setup>:

  • defineProps deklaruje dane wejściowe (obiekt używany w czasie działania lub generyk TS).
  • Używaj ? dla opcjonalnych props oraz withDefaults dla wartości domyślnych.
  • Props są tylko do odczytu i przepływają w jednym kierunku.
  • defineEmits deklaruje zdarzenia, opcjonalnie wraz z typowanymi nazwami i danymi.

Często zadawane pytania

Czy lekcja „defineProps i defineEmits” jest bezpłatna?

Tak — pełny tekst „defineProps i defineEmits” 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 Vue Academy, przejdź na CoddyKit PRO. Kurs Vue Academy zawiera 4 lekcji w sumie.

Co nauczysz się w „defineProps i defineEmits”?

Typowane właściwości za pomocą defineProps (), defineEmits (), withDefaults() dla wartości domyślnych. Ćwiczysz Vue 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ąć Vue Academy?

Nie wymagamy żadnego doświadczenia. Vue 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 2 z 4.

Ile czasu zajmuje lekcja „defineProps i defineEmits”?

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 Vue Academy?

Tak. Każda lekcja Vue 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

  1. Wprowadzenie do script setup
  2. defineProps i defineEmits
  3. defineExpose i useAttrs
  4. Importowanie i używanie composables w script setup
← Powrót do Vue Academy