Zdarzenia w LWC służą do komunikacji z komponentami. Jeśli istnieją powiązane komponenty, możliwa jest komunikacja od rodzica do dziecka lub dziecka do rodzica. Jeśli występują dwa niepowiązane ze sobą komponenty, możemy komunikować się poprzez model PubSub (Publish-Subscription) lub za pomocą Lightning Message Service (LMS). W tym przewodniku omówimy, jak komunikować się ze zdarzeniami od rodzica do dziecka, dziecka do rodzica i powiązanych ze sobą komponentów przy użyciu modelu PubSub.
Możesz umieścić komponenty na stronie rekordu, stronie aplikacji lub stronie głównej. Nie będziemy ponownie określać tego pliku (meta-xml) w przykładowych fragmentach kodu:
wersja XML = „1,0” ?>
< Pakiet LightningComponent xmlns = „http://soap.sforce.com/2006/04/metadata” >
< wersja api > 57,0 wersja api >
< jest narażony > PRAWDA jest narażony >
< cele >
< cel > błyskawica__RecordPage cel >
< cel > błyskawica__AppPage cel >
< cel > błyskawica__Strona główna cel >
cele >
Pakiet LightningComponent >
Komunikacja rodzica z dzieckiem
Jeżeli dwa komponenty są ze sobą powiązane, taka komunikacja jest możliwa. Tutaj Rodzic przesyła dane Dziecku. Komponent nadrzędny zawiera komponent podrzędny. Dzięki takiemu podejściu możemy przekazać dane pierwotne (liczba całkowita, ciąg, wartość logiczna itp.) od rodzica do dziecka, przekazać dane nieprymitywne (tablica, obiekt, tablica obiektów itp.) od rodzica do dziecka, przekazując dane do komponent Child z akcją na Parent.
Aby przekazać element nadrzędny dziecku, musimy udostępnić pola, właściwości i metody dostępne w komponencie Dziecko jako publiczne. Można to osiągnąć dekorując pola, właściwości i metody dekoratorem „api”.
Przykład : Zadeklaruj zmienną z „api” w pliku „js” komponentu potomnego.
@ zmienna API ;
Teraz komponent Parent korzysta ze komponentu Child w pliku HTML za pośrednictwem atrybutów HTML.
Przykład : Użyj zmiennej w nadrzędnym pliku HTML.
< C - dziecko - zmienna komp > C - dziecko - komp >
Omówmy kilka przykładów opisujących sposób komunikowania się z rodzicem na dziecko.
Przykład 1:
Ten podstawowy przykład ilustruje otrzymanie informacji wysyłanej przez Rodzica do Dziecka.
childtComp.js
Najpierw tworzymy komponent Child, który przechowuje zmienną „informacje”, która jest publicznie dostępna.
// Zadeklaruj zmienną jako publiczną, używając dekoratora API@ informacje o API
Cały kod „js” możesz zobaczyć na poniższym zrzucie ekranu:
childtComp.html
Teraz określamy tę zmienną w pliku HTML w środkowym tagu.
< szablon >< Błyskawica - tytuł karty = 'Dziecko' >
< Centrum >
< B > { Informacja } B >
Centrum >
Błyskawica - karta >
szablon >
nadrzędnyComp.js
W pliku „js” nic nie robimy.
nadrzędnyKomp.html
Umieść poprzedni komponent podrzędny w nadrzędnym kodzie HTML, przekazując zmienną publiczną (informację) z jakimś tekstem.
< szablon >< Błyskawica - tytuł karty = 'Rodzic' Ikona - nazwa = „standard:konto” >
< C - dziecko - komp
Informacja = „Witam, otrzymałem informację…”
> C - dziecko - komp >
Błyskawica - karta >
szablon >
Wyjście:
Teraz przejdź do organizacji Salesforce i umieść komponent Parent na stronie „Rekord”. Zobaczysz, że komponent Child otrzymał informacje od komponentu Parent.
Przykład 2:
Stwórzmy dwa wejściowe pola tekstowe, które dynamicznie przyjmą tekst z interfejsu użytkownika w komponencie Parent. Jeśli wstawimy pierwszy tekst w komponencie Parent, komponent podrzędny otrzyma ten tekst wielkimi literami. Podobnie otrzyma tekst pisany małymi literami, jeśli wstawimy drugi tekst.
childtComp.js
Utwórz dwie zmienne – informację1 i informację2 – za pomocą dekoratora ścieżek.
- Utwórz metodę ConvertToUpper() z dekoratorem „api”, który konwertuje pierwszy wprowadzony tekst na wielkie litery.
- Utwórz metodę ConvertToLower() z dekoratorem „api”, który konwertuje drugi tekst wejściowy na małe litery.
@ śledź informacje 2 ;
@ API
konwertuj na górny ( aktualne informacje 1 ) {
Ten . Informacje 1 = aktualne informacje 1. do wielkich liter ( ) ;
}
@ API
konwertuj na niższą ( aktualne informacje 1 ) {
Ten . Informacje2 = aktualne informacje 1. do małej litery ( ) ;
}
Cały kod „js” wygląda następująco:
childtComp.html
Wyświetlamy wartości (Informacja1 i Informacja2), które pochodzą z pliku „js”.
< szablon >< Błyskawica - tytuł karty = 'Dziecko' >
Duże litery :& nbsp ; < B > { Informacje 1 } B >< br >
Małe litery :& nbsp ; < B > { Informacje2 } B >
Błyskawica - karta >
szablon >
nadrzędnyComp.js
Tworzymy dwie metody obsługi, które wybierają podrzędny szablon HTML za pomocą querySelector(). Upewnij się, że musisz przekazać poprawne metody, które konwertują tekst na wielkie lub małe litery.
uchwytZdarzenie1 ( wydarzenie ) {Ten . szablon . selektor zapytań ( „c-childt-comp” ) . konwertuj na górny ( wydarzenie. cel . wartość ) ;
}
uchwytEvent2 ( wydarzenie ) {
Ten . szablon . selektor zapytań ( „c-childt-comp” ) . konwertuj na niższą ( wydarzenie. cel . wartość ) ;
}
Cały kod „js” wygląda następująco:
nadrzędnyKomp.html
Utwórz tekst wejściowy ze zdarzeniami obsługi dla obu z nich. Umieść komponent podrzędny w komponencie nadrzędnym.
< szablon >< Błyskawica - tytuł karty = 'Rodzic' >
< Centrum >
< Błyskawica - etykieta wejściowa = „Wpisz tekst małymi literami” na zmianę = { uchwytZdarzenie1 } > Błyskawica - wejście >
Centrum >
< br >< br >
< Centrum >
< Błyskawica - etykieta wejściowa = „Wpisz tekst wielkimi literami” na zmianę = { uchwytEvent2 } > Błyskawica - wejście >
Centrum >
< br >< br >< br >
< C - dziecko - komp > C - dziecko - komp >
Błyskawica - karta >
szablon >
Wyjście:
Teraz przejdź do organizacji Salesforce i umieść komponent Parent na stronie „Rekord”.
W interfejsie użytkownika zobaczysz dwa wpisy tekstowe.
Napiszmy trochę tekstu w pierwszym wejściu, a zobaczysz, że tekst jest konwertowany na wielkie litery i wyświetlany w komponencie Dziecko.
Wpisz tekst w drugim wejściu, a zobaczysz, że tekst jest konwertowany na małe litery i wyświetlany w komponencie Dziecko.
Komunikacja dziecka z rodzicem
Podobnie jak w przypadku poprzedniej komunikacji, aby komunikować Dziecko Rodzicowi, oba elementy powinny być ze sobą powiązane. Możemy komunikować Dziecko Rodzicowi na trzy różne sposoby: dzwoniąc do Rodzica do Dziecka za pomocą prostego zdarzenia i dzwoniąc do Rodzica do Dziecka za pomocą zdarzenia z bulgotaniem danych i zdarzeń. W tym przewodniku przyjrzymy się prostemu zdarzeniu.
Aby móc skomunikować Dziecko z Rodziciem, musimy stworzyć i wysłać zdarzenia. W tym celu należy utworzyć wydarzenie niestandardowe. Event niestandardowy to wydarzenie, które tworzysz samodzielnie. Możemy go utworzyć za pomocą słowa kluczowego new. Event_Name może być dowolna (może to być ciąg znaków, nie więcej niż wielkie litery lub cyfry). Na razie nie będziemy omawiać opcji.
Składnia : nowe zdarzenie niestandardowe („Nazwa_zdarzenia”, {opcje…})
Teraz masz wydarzenie niestandardowe. Następnym krokiem jest wysłanie zdarzenia. Aby wywołać zdarzenie, musimy określić zdarzenie, które utworzyliśmy w metodzie EventTarget.dispatchEvent().
Składnia : this.displatchEvent(new CustomEvent('Nazwa_zdarzenia',{opcje...})
W końcu musimy zająć się wydarzeniem. Teraz musimy wywołać komponent podrzędny w komponencie nadrzędnym. Przekaż nazwę wydarzenia, podając przedrostek „on” w nazwie wydarzenia. To wymaga obsługi detektora zdarzeń.
Składnia:
< C - dziecko - komponent onyourEventName = { słuchaczHandler } > C - dziecko - część >Przykład:
W tym przykładzie tworzymy jeden komponent nadrzędny (exampleParent) i dwa komponenty podrzędne.
- W pierwszym Child (exampleChild) tworzymy tekst wejściowy, który pozwala użytkownikowi na podanie tekstu. Ten sam tekst jest wyświetlany w komponencie Rodzic, wielkimi literami.
- W drugim Child (child2) tworzymy tekst wejściowy, który pozwala użytkownikowi na wprowadzenie tekstu. Ten sam tekst jest wyświetlany w komponencie Rodzic, małymi literami.
przykładDziecko.js
Tworzymy metodę handleChange1, która tworzy zdarzenie CustomEvent „linuxhintevent1” ze szczegółami jako wartością docelową. Następnie wysyłamy to wydarzenie. Osadź następujący fragment w tym pliku „js”.
// obsłuż wydarzenieuchwytZmień1 ( wydarzenie ) {
wydarzenie. zapobiegajDomyślnie ( ) ;
konst imię 1 = wydarzenie. cel . wartość ;
konst wybierzWydarzenie1 = nowy Zdarzenie niestandardowe ( „linuxhintevent1” , {
Szczegół : imię 1
} ) ;
Ten . wydarzenie wysyłkowe ( wybierz Wydarzenie 1 ) ;
}
przykładDziecko.html
Poprzednia metoda obsługi utworzona w „js” jest obsługiwana w oparciu o dane wejściowe błyskawicy w komponencie HTML.
< szablon >< Błyskawica - tytuł karty = „Dziecko 1” >
< div klasa = „slds-m-around_medium” >
< Błyskawica - etykieta wejściowa = „Wpisz tekst małymi literami” na zmianę = { uchwytZmień1 } > Błyskawica - wejście >
div >
Błyskawica - karta >
szablon >
dziecko2.js
Tworzymy metodę handleChange2, która tworzy zdarzenie CustomEvent „linuxhintevent2” ze szczegółami jako wartością docelową. Następnie wysyłamy to wydarzenie.
uchwytZmień2 ( wydarzenie ) {wydarzenie. zapobiegajDomyślnie ( ) ;
konst imię2 = wydarzenie. cel . wartość ;
konst wybierzWydarzenie2 = nowy Zdarzenie niestandardowe ( „linuxhintevent2” , {
Szczegół : imię2
} ) ;
Ten . wydarzenie wysyłkowe ( wybierzWydarzenie2 ) ;
}
dziecko2.html
Poprzednia metoda obsługi utworzona w „js” jest obsługiwana w oparciu o dane wejściowe błyskawicy w komponencie HTML.
< szablon >< Błyskawica - tytuł karty = „Dziecko 2” >
< div klasa = „slds-m-around_medium” >
< Błyskawica - etykieta wejściowa = „Wpisz tekst wielkimi literami” na zmianę = { uchwytZmień2 } > Błyskawica - wejście >
div >
Błyskawica - karta >
szablon >
przykładParent.js: Osadź ten fragment w swoim pliku „js” wewnątrz klasy.
- Konwertuj dane wejściowe na wielkie litery za pomocą funkcji toUpperCase() w handleEvent1() i zapisz je w zmiennej Information1
- Konwertuj dane wejściowe na małe litery za pomocą funkcji toLowerCase() w handleEvent2() i zapisz je w zmiennej Information2.
// Konwertuj dane wejściowe na wielkie litery za pomocą funkcji toUpperCase().
// w handleEvent1() i zapisz w zmiennej Information1
handleEvent1(zdarzenie) {
const wejście1 = zdarzenie.szczegół;
this.Information1 = input1.toUpperCase();
}
@Informacje o ścieżce2;
// Konwertuj dane wejściowe na małe litery za pomocą funkcji toLowerCase().
// w handleEvent2() i zapisz w zmiennej Information2
handleEvent2(zdarzenie) {
const wejście2 = zdarzenie.szczegół;
this.Information2 = input2.toLowerCase();
}
przykładParent.html
Teraz wyświetl dwie zmienne (Informacja 1 i Informacja 2) w nadrzędnym komponencie HTML, określając oba komponenty podrzędne.
< div klasa = „slds-m-around_medium” >
Wiadomość podrzędna-1 pisana wielkimi literami: < B > {Informacja1} < / B >< br >
Wiadomość dla dziecka-2 pisana małymi literami: < B > {Informacja2} < / B >< br >
< / B >< br >
< / div >
< / karta-błyskawica>
< / szablon>
Wyjście:
Teraz przejdź do organizacji Salesforce i umieść komponent Parent na stronie „Rekord”.
Możesz zobaczyć, że w elemencie nadrzędnym istnieją dwa komponenty podrzędne.
Wpiszmy jakiś tekst w tekście wejściowym pod komponentem Dziecko 1. Widzimy, że nasz tekst jest wyświetlany wielkimi literami w komponencie Parent.
Wpisz jakiś tekst w tekście wejściowym pod komponentem Dziecko 2. Widzimy, że nasz tekst jest wyświetlany małymi literami w komponencie Parent.
Możliwe jest także wprowadzenie obu tekstów na raz.
Model PubSuba
Jeśli pracujesz z niezależnymi komponentami (niepowiązanymi ze sobą) i chcesz przesyłać informacje z jednego komponentu do drugiego, możesz skorzystać z tego modelu. PubSub oznacza Publikuj i Subskrybuj. Komponent wysyłający dane nazywany jest wydawcą, a komponent odbierający dane nazywany jest subskrybentem. Do przesyłania zdarzeń pomiędzy komponentami wymagane jest użycie modułu pubsub. Jest już predefiniowany i podany przez Salesforce. Nazwa pliku to pubsub. Musisz utworzyć komponent LWC i wpisać ten kod w swoim pliku JavaScript, który jest „pubsub.js”.
Przykład:
Stwórzmy dwa komponenty – Publikuj i Subskrybuj.
W Publish umożliwiamy użytkownikom tworzenie tekstu wejściowego. Po kliknięciu przycisku dane są odbierane wielkimi i małymi literami w komponencie Subskrybuj.
opublikuj.js
Osadź ten kod w swoim pliku JSON. Tutaj uzyskujemy informacje i publikujemy je.
Zmienna informacyjna będzie pisana wielkimi literami, a informacja 1 będzie małymi literami. Upewnij się, że umieściłeś tę instrukcję importu na początku kodu – zaimportuj pubsub z „c/pubsub”.
Informacjainformacja2
// Pobierz informacje pisane wielkimi i małymi literami
obsługa informacji ( wydarzenie ) {
Ten . Informacja = wydarzenie. cel . wartość ;
Ten . informacja2 = wydarzenie. cel . wartość ;
}
// Opublikuj obie informacje (wielkimi i małymi literami)
opublikowaćHandler ( ) {
pubsub. publikować ( 'Publikować' , Ten . Informacja )
pubsub. publikować ( 'Publikować' , Ten . informacja2 )
}
To powinno wyglądać tak:
opublikuj.html
Najpierw tworzymy wejście błyskawiczne, aby zaakceptować tekst z informacjami o procedurze obsługi. Następnie tworzony jest jeden przycisk z funkcją onclick. Funkcje te znajdują się w poprzednim fragmencie kodu „js”.
< / karta-błyskawica>
< / szablon>
subskrybuj.js
Osadź ten kod w swoim pliku JSON. Tutaj najpierw subskrybujemy informacje, zamieniając je osobno na wielkie i małe litery w metodzie callSubscriber(). Następnie wywołujemy tę metodę poprzez metodę connectcallback(). Upewnij się, że umieściłeś tę instrukcję importu na początku kodu – zaimportuj pubsub z „c/pubsub”.
Informacjainformacja2
// wywołanie funkcji callSubscriber()
podłączonyOddzwonienie ( ) {
Ten . zadzwońAbonent ( )
}
// Subskrybuj informacje, zamieniając je na wielkie litery
zadzwońAbonent ( ) {
pubsub. Subskrybuj ( 'Publikować' , ( Informacja ) => {
Ten . Informacja = Informacja. do wielkich liter ( ) ;
} ) ,
// Subskrybuj informacje, zamieniając je na małe litery
pubsub. Subskrybuj ( 'Publikować' , ( informacja2 ) => {
Ten . informacja2 = informacja2. do małej litery ( ) ;
} )
}
To powinno wyglądać tak:
subskrybuj.html
Wyświetlamy tekst wielkimi literami (przechowywanymi w informacji) i małymi literami (przechowywanymi w informacji2).
< div klasa = „slds-p-around_medium” >
Informacje otrzymane wielkimi literami - < B > {Informacja} < / B >< br >
Informacje otrzymane małymi literami - < B > {informacja2} < / B >
< / div >
< / karta-błyskawica>
< / szablon>
Wyjście:
Dodaj te dwa komponenty do swojej strony. Upewnij się, że oba komponenty znajdują się na tej samej stronie. W przeciwnym razie funkcja nie będzie działać.
Wpiszmy jakiś tekst w komponencie „Publikuj” i kliknijmy przycisk „Wyślij dane”. Widzimy, że tekst jest odbierany wielkimi i małymi literami.
Wniosek
Teraz możemy komunikować się z komponentami LWC poprzez koncepcję wydarzeń w Salesforce LWC. W ramach tego przewodnika dowiedzieliśmy się, jak komunikować się od Rodzica do Dziecka i od Dziecka do Rodzica. Model PubSub stosowany jest w przypadku, gdy Twoje komponenty nie są ze sobą powiązane (nie Parent – Child). Każdy scenariusz jest wyjaśniony na prostym przykładzie i pamiętaj o umieszczeniu kodu podanego na początku tego przewodnika w pliku „meta-xml”.