Vue: data

58. hodina MVOP WBF

Matěj Cajthaml — SSPŠ

©

Opakování

Jak zapíšeme v JS switch? K čemu slouží?
Jaké znáte selektory?
Jak se definuje grid?
K čemu slouží atribut scoped? Kde ho používáme?
Jaká vypadá životní cyklus Vue instance?

Jak předáme data z rodičovské komponenty do potomka?

props

props

Jak předáme data z potomka do rodičovské komponenty?

Události

  • events
  • způsob komunikace napříč komponentami
  • využívá se i jinde (a skoro všude) k různým účelům
  • ve Vue: notifikace více míst o události

Jak události fungují

  • událost se vyvolá na komponentě
  • rodič může k volání události s jménem připojit
  • při vyvolání se daná funkce zavolá (rodič událost zpracuje)

Vyvolání události

  • každá komponenta může vyvolat událost pomocí .$emit(name, data)
  • každé události nastavujeme pomocí parametrů jméno a nepovinně data

Zachycení

  • při vložení komponenty do šablony můžeme pomocí attributu v-on:name nebo @name zachytit naší událost pojmenovanou name

Hodí se události i na jiné věci než předávání si informací?

Jaké jsou nevýhody tohoto systému?

Události

Práce

Nutné: použití komponent, událostí k předávání informací o notifikaci

Jak předáme data z potomka do rodičovské komponenty?

Příště: kompozice a lepší systém k ukládání dat ve velkých aplikacích.

Děkuji za pozornost!

  • matej.cajthaml@ssps.cz
  • https://ssps.cajthaml.eu/