Phenquestions
Vue.js to wszechstronny i pełnoprawny framework do tworzenia ogromnych aplikacji internetowych. Każda aplikacja internetowa jest podzielona na komponenty. Na przykład prosta strona internetowa zawierająca nagłówek, pasek boczny i kilka innych elementów. W celu zarządzania i obsługi tego podejścia opartego na komponentach, Vue.js oferuje relację rodzic-dziecko między komponentami i jeśli chcemy przesłać jakieś dane między komponentami. Vue.js oferuje props do wysyłania danych z rodzica do komponentu potomnego, ale do wysyłania danych od dziecka do rodzica; musimy emitować niestandardowe zdarzenia. W tym artykule dowiemy się o uruchamianiu i słuchaniu zdarzeń niestandardowych.Przede wszystkim zobaczmy, jak uruchomić niestandardowe zdarzenie w Vue.js a potem jak słuchać tego wydarzenia. Składnia uruchamiania zdarzenia w Vue.js jest
to.$emit('nazwa zdarzenia')W tej składni musimy być ostrożni podczas nadawania nazwy zdarzeniu, ponieważ używamy tej samej nazwy; później posłuchamy tego wydarzenia. Aby posłuchać tego zdarzenia, możemy go posłuchać, tak jak słuchamy zdarzenia kliknięcia w Vue.js. Na przykład
W cudzysłowie możemy zapisać dowolne wyrażenie, a także funkcję. Wypróbujmy więc przykład, aby lepiej to zrozumieć.
Przykład
Załóżmy, że mamy komponent o nazwie „parentComponent”, który zawiera w sobie komponent podrzędny o nazwie „childComponent”, do którego przekazujemy wiadomość za pomocą właściwości.
Komponent nadrzędny
Komponent potomny
W komponencie potomnym pobieramy rekwizyty i wyświetlamy komunikat w tagu „p”.
wiadomość
Teraz po skonfigurowaniu tych dwóch komponentów. Przywitajmy się z powrotem do naszego ParentComponent. Aby się przywitać, najpierw utworzymy przycisk, a po kliknięciu tego przycisku wywołamy funkcję „helloBack”. Po utworzeniu przycisku kod HTML komponentu potomnego wyglądałby tak
wiadomość
Stwórzmy również funkcję „helloBackFunc” w obiekcie Method. W którym wyemitujemy „helloBackEvent” wraz ze zmienną „helloBackVar” zawierającą ciąg „Hello Parent”. Po utworzeniu funkcji skrypt java komponentu potomnego wyglądałby tak
Skończyliśmy z odpalaniem imprezy. Przejdźmy teraz do komponentu nadrzędnego, aby odsłuchać wydarzenie.
W komponencie nadrzędnym możemy po prostu nasłuchiwać zdarzenia, tak jak słuchamy zdarzenia kliknięcia. Po prostu wysłuchamy zdarzenia w tagu ChildComponent i wywołamy na nim funkcję „thanks()””.
W funkcji thanks przypiszemy przekazany ciąg do zmiennej o nazwie „thanksMessage”. Po utworzeniu funkcji i przypisaniu przekazanego ciągu do zmiennej skrypt java „parentComponent” wyglądałby tak
I powiąż gdzieś zmienną „thanksMessage” w szablonie, aby zobaczyć, czy działa, czy nie.
Komponent nadrzędny
DziękujęWiadomość
Komponent potomny
Po utworzeniu i napisaniu całego tego kodu wejdź na stronę i załaduj ją ponownie, aby uzyskać najnowsze funkcjonalności.
Widzimy, że rekwizyty są z powodzeniem przekazywane do komponentu potomnego. Teraz, jeśli klikniemy przycisk, który faktycznie znajduje się w komponencie potomnym. Wiadomość z podziękowaniem powinna być wyświetlana zaraz po nagłówku nadrzędnego komponentu.
Jak widać, jest wyświetlany.
W ten sposób możemy emitować lub uruchamiać zdarzenia niestandardowe i słuchać ich w innym komponencie w Vue.js.
streszczenie
W tym artykule nauczyliśmy się emitować niestandardowe zdarzenia w Vue.js. Ten artykuł zawiera krok po kroku właściwy przykład, aby go zrozumieć, wraz z krótkim wyjaśnieniem. Mamy więc nadzieję, że ten artykuł pomoże w opracowaniu lepszych i przejrzystych koncepcji emitowania zdarzeń niestandardowych w Vue.js. Aby uzyskać więcej takich przydatnych treści, odwiedź linuxhint.com
