Lekcja krótka, łatwa i przyjemna, poznajemy event modifiers, bardzo przydatną rzecz w Vue.js.
Ok, dodamy do naszej apki takie cudo:
<template>
<img alt="Vue logo" src="./assets/logo.png" >
<HelloWorld msg="Welcome to Your Vue.js App"/>
<NewComponent name="John Doe" @abc="abcHandler"></NewComponent>
<NewComponent name="Jane Doe" @abc="abcHandler"></NewComponent>
<ul>
<li><a href="https://www.google.com" @click.prevent>Google</a></li>
</ul>
</template>Prevent robi preventDefault, czyli zapobiega domyślnemu działaniu (przez co nie przechodzimy pod link). Możemy też dać tam jakąś funkcję:
<li><a href="https://www.google.com" @click.prevent="abcHandler('google')">Google</a></li>Modyfikatory możemy chainować:
<li><a href="https://www.google.com" @click.prevent.once="abcHandler('this leads to google')">Google</a></li>Rzućmy okiem na kilka przykładów z dokumentacji:
<!-- this will fire even if Alt or Shift is also pressed -->
<button @click.ctrl="onClick">A</button>
<!-- this will only fire when Ctrl and no other keys are pressed -->
<button @click.ctrl.exact="onCtrlClick">A</button>
<!-- this will only fire when no system modifiers are pressed -->
<button @click.exact="onClick">A</button>Jeszcze kilka przykładów:
<!-- the click event's propagation will be stopped -->
<a @click.stop="doThis"></a>
<!-- the submit event will no longer reload the page -->
<form @submit.prevent="onSubmit"></form>
<!-- modifiers can be chained -->
<a @click.stop.prevent="doThat"></a>
<!-- just the modifier -->
<form @submit.prevent></form>
<!-- only trigger handler if event.target is the element itself -->
<!-- i.e. not from a child element -->
<div @click.self="doThat">...</div>Dla myszy mamy też left, right i middle. Ale to z grubsza większość. Musimy pracując z eventami pamiętać o kilku rzeczach:
- W frameworkach frontendowych co do zasady, defaultowo, obowiązuje zasada jednokierunkowego przepływu danych z góry na dół
- Co do zasady ten przepływ danych odbywa się przez wszystkich pośredników (provide/inject potrafi pomijać ich w komunikacji dziadek/prodzek-wnuk/potomek)
- Co do zasady, eventy JS mają bubble phase i capture phase
- Eventy customowe propagują od elementu HTML markupu swojego komponentu aż do rodzica-komponentu
- Rodzic komponent może słuchać eventów emitowanych przez swoje HTMLowe dzieci, ale te eventy nie propagują w górę do jego rodziców (co do zasady)
- Choć wygląda na to, że Vue tworzy web components (jak w stencilu albo czystym JS) to de facto nie tworzy. Tag <MyComponent> (jakkolwiek by nie był nazwany) to tylko pewna koncepcja, wobec tego słuchanie na komponentach (nie HTMLu) na zwykłe eventy (click na przykład) nie ma sensu i jest bardzo problematyczne
Nie jest łatwo, aby pozyskać reaktywność do swojego backendu, to są zupełnie nowe i nam nieznane koncepcje i podejścia. Musimy się oswoić z tym.
