Vue Academy · Lekcja

Props i własne zdarzenia

Przekażą Państwo dane w dół za pomocą props i wyemitują zdarzenia do komponentów nadrzędnych.

Lekcja 2 z 313 kroki

Props i własne zdarzenia to bezpłatna lekcja Vue Academy na CoddyKit. To lekcja 2 z 3. 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 3 lekcji w sumie.

Komunikacja rodzic–dziecko

Komponenty komunikują się w dwóch kierunkach:

Propsy przekazują dane z komponentu nadrzędnego do podrzędnego
Zdarzenia wysyłają komunikaty z komponentu podrzędnego do nadrzędnego

Ten jednokierunkowy przepływ danych sprawia, że działanie aplikacji jest przewidywalne.

Deklarowanie propsów

Komponent podrzędny deklaruje propsy, które przyjmuje. W script setup należy użyć defineProps.

<script setup>
const props = defineProps(['title', 'count'])
</script>

<template>
  <h2>{{ title }}</h2>
  <p>{{ count }}</p>
</template>

Propsy z typami

Propsy można zadeklarować jako obiekt, aby określić typy na potrzeby walidacji.

<script setup>
defineProps({
  title: String,
  count: Number,
  isActive: Boolean
})
</script>

Wartości domyślne i wymagane propsy

Można oznaczyć propsy jako required i nadać im wartości default.

<script setup>
defineProps({
  title: {
    type: String,
    required: true
  },
  count: {
    type: Number,
    default: 0
  }
})
</script>

Przekazywanie propsów z komponentu nadrzędnego

Komponent nadrzędny przekazuje dane jako atrybuty. Do wiązania wartości dynamicznych należy używać :.

<template>
  <ProductCard
    title="Coffee Mug"
    :count="stock"
    :is-active="available"
  />
</template>

<!-- static string vs bound expression -->

Konwencja nazewnictwa propsów

W JS propsy deklaruje się w notacji camelCase, a w szablonach przekazuje w notacji kebab-case.

Prop w JS: isActive
Atrybut w szablonie: :is-active

Vue automatycznie konwertuje jedną notację na drugą.

Propsy są tylko do odczytu

Komponent podrzędny nie może modyfikować swoich propsów bezpośrednio.

Propsy przepływają tylko w dół hierarchii
Ich modyfikowanie utrudnia przewidywanie działania i powoduje ostrzeżenia
Aby zmienić współdzielone dane, należy wyemitować zdarzenie, aby komponent nadrzędny je zaktualizował

Deklarowanie emitowanych zdarzeń

Komponent podrzędny deklaruje emitowane zdarzenia za pomocą defineEmits.

<script setup>
const emit = defineEmits(['increment', 'delete'])
</script>

Emitowanie zdarzenia

Wywołanie funkcji emit wysyła zdarzenie w górę, opcjonalnie wraz z danymi.

<script setup>
const emit = defineEmits(['add'])

function handleClick() {
  emit("add", { id: 1, name: "Item" })
}
</script>

<template>
  <button @click="handleClick">Add</button>
</template>

Emitowanie zdarzeń w Options API

W Options API zamiast tego należy wywołać this.$emit.

export default {
  emits: ["save"],
  methods: {
    onSave() {
      this.$emit("save", this.formData)
    }
  }
}

Nasłuchiwanie zdarzeń przez komponent nadrzędny

Komponent nadrzędny nasłuchuje za pomocą @event-name i odbiera przekazane dane.

<template>
  <TodoItem
    :task="task"
    @delete="removeTask"
    @add="onAdd"
  />
</template>

<script setup>
function onAdd(item) {
  console.log("Added:", item.name)
}
</script>

Szybki test

Proszę sprawdzić swoją znajomość propsów i zdarzeń.

Odpowiedz w interaktywnej lekcji

Podsumowanie: propsy i zdarzenia

W tym rozdziale poznali Państwo komunikację między komponentami:

defineProps deklaruje propsy wraz z typami i wartościami domyślnymi
Propsy przepływają w dół i są tylko do odczytu
defineEmits deklaruje zdarzenia
emit("name", payload) wysyła zdarzenia w górę
Komponent nadrzędny nasłuchuje za pomocą @event

Następnie: sloty i sloty zakresowe.

Bezpłatny start

Ucz się HTML dzięki korepetycjom AI — za darmo

Pisz i uruchamiaj kod w przeglądarce, otrzymuj natychmiastową pomoc od korepetytora AI dostępnego 24/7 i kontynuuj naukę w sieci lub w aplikacji.

Kursy: 42
Lekcje: 156

Zacznij naukę bezpłatnie Wyświetl pełny kurs

Często zadawane pytania

Czy lekcja „Props i własne zdarzenia” jest bezpłatna?

Tak — pełny tekst „Props i własne zdarzenia” 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 3 lekcji w sumie.

Co nauczysz się w „Props i własne zdarzenia”?

Przekażą Państwo dane w dół za pomocą props i wyemitują zdarzenia do komponentów nadrzędnych. Ć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 3.

Ile czasu zajmuje lekcja „Props i własne zdarzenia”?

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

← Powrót do Vue Academy