LWC notikumi tiek izmantoti, lai sazinātos ar komponentiem. Ja ir saistīti komponenti, var būt iespējams sazināties no vecākiem ar bērnu vai no bērna uz vecāku. Ja ir divi nesaistīti komponenti, mēs varam sazināties, izmantojot PubSub (Publish-Abone) modeli vai Lightning Message Service (LMS). Šajā rokasgrāmatā mēs apspriedīsim, kā sazināties ar notikumiem no vecākiem līdz bērnam, no bērna līdz vecākam un savstarpēji saistītiem komponentiem, izmantojot PubSub modeli.
Varat ievietot komponentus savā ierakstu lapā, lietotnes lapā vai sākumlapā. Mēs nenorādīsim šo failu (meta-xml) vēlreiz, izmantojot koda fragmentu piemērus:
xml versija = '1.0' ?>
< LightningComponentBundle xmlns = 'http://soap.sforce.com/2006/04/metadata' >
< apiVersion > 57.0 apiVersion >
< isExposed > taisnība isExposed >
< mērķi >
< mērķis > zibens__Ieraksta lapa mērķis >
< mērķis > lightning__AppPage mērķis >
< mērķis > zibens__Mājas lapa mērķis >
mērķi >
LightningComponentBundle >
Saziņa no vecākiem ar bērnu
Ja divi komponenti ir saistīti viens ar otru, šī komunikācija ir iespējama. Šeit vecāki nosūta datus bērnam. Vecākkomponents satur Child komponentu. Izmantojot šo pieeju, mēs varam nodot primitīvos datus (vesels skaitlis, virkne, Būla u.c.) no vecāka uz bērnu, neprimitīvos datus (masīvs, objekts, objektu masīvs utt.) no vecāka uz bērnu, nododot datus Bērna komponents ar darbību uz vecāku.
Lai sazinātos no vecākiem ar bērnu, mums ir jāpadara publiski redzami komponentā Child pieejamie lauki, rekvizīti un metodes. Tas ir iespējams, dekorējot laukus, īpašības un metodes ar “api” dekorētāju.
Piemērs : deklarējiet mainīgo ar “api” Child komponenta “js” failā.
@ api mainīgais ;
Tagad komponents Parent izmanto HTML faila komponentu Child, izmantojot HTML atribūtus.
Piemērs : izmantojiet mainīgo vecāku HTML failā.
< c - bērns - comp mainīgais > c - bērns - sast >
Apspriedīsim dažus piemērus, kas apraksta, kā sazināties ar vecākiem ar bērnu.
1. piemērs:
Šis pamata piemērs parāda, kā iegūt informāciju, ko vecāki nosūta bērnam.
childtComp.js
Pirmkārt, mēs izveidojam Child komponentu, kurā ir publiski pieejams mainīgais “informācija”.
// Pasludiniet mainīgo kā publisku, izmantojot api Decorator@ api informācija
Šajā ekrānuzņēmumā varat skatīt visu “js” kodu:
childtComp.html
Tagad mēs norādām šo mainīgo HTML failā centrālajā tagā.
< veidne >< zibens - kartes nosaukums = 'Bērns' >
< centrs >
< b > { informāciju } b >
centrs >
zibens - karti >
veidne >
parentComp.js
Mēs neko nedarām failā “js”.
parentComp.html
Ievietojiet iepriekšējo pakārtoto komponentu vecākajā HTML, nododot publisko mainīgo (informāciju) ar tekstu.
< veidne >< zibens - kartes nosaukums = 'vecāks' ikonu - nosaukums = 'standarta: konts' >
< c - childt - sast
informāciju = 'Sveiki, es saņēmu informāciju...'
> c - childt - sast >
zibens - karti >
veidne >
Izvade:
Tagad dodieties uz savu Salesforce organizāciju un ievietojiet vecāku komponentu lapā “Ierakstīt”. Jūs redzēsit, ka komponents Bērns saņēma informāciju no vecāka.
2. piemērs:
Izveidosim divus ievades teksta laukus, kas dinamiski pieņems tekstu no UI komponentā Parent. Ja pirmo tekstu ievietojam komponentā Parent, bērnkomponents saņem šo tekstu ar lielajiem burtiem. Tāpat tas saņem tekstu ar mazajiem burtiem, ja ievietojam otro tekstu.
childtComp.js
Izveidojiet divus mainīgos – information1 un information2 – ar sliežu ceļa dekorētāju.
- Izveidojiet metodi convertToUpper() ar “api” dekoratoru, kas pirmo ievades tekstu pārvērš par lielajiem burtiem.
- Izveidojiet metodi convertToLower() ar “api” dekoratoru, kas pārvērš otro ievades tekstu mazajos burtos.
@ trases informācija2 ;
@ api
convertToUpper ( faktiskā informācija1 ) {
šis . Informācija1 = faktiskā informācija1. uz Lielajiem burtiem ( ) ;
}
@ api
convertToLower ( faktiskā informācija1 ) {
šis . Informācija2 = faktiskā informācija1. mazajiem burtiem ( ) ;
}
Viss “js” kods izskatās šādi:
childtComp.html
Mēs parādām vērtības (Informācija1 un Informācija2), kas nāk no faila “js”.
< veidne >< zibens - kartes nosaukums = 'Bērns' >
Lielie burti :& nbsp ; < b > { Informācija1 } b >< br >
Mazais burts :& nbsp ; < b > { Informācija2 } b >
zibens - karti >
veidne >
parentComp.js
Mēs izveidojam divas apstrādātāja metodes, kas atlasa pakārtoto HTML veidni, izmantojot querySelector(). Pārliecinieties, vai ir jānodod pareizās metodes, kas pārvērš tekstu lielos vai mazajos burtos.
rokturisNotikums1 ( notikumu ) {šis . veidne . querySelector ( 'c-childt-comp' ) . convertToUpper ( notikumu. mērķis . vērtību ) ;
}
rokturisNotikums2 ( notikumu ) {
šis . veidne . querySelector ( 'c-childt-comp' ) . convertToLower ( notikumu. mērķis . vērtību ) ;
}
Viss “js” kods izskatās šādi:
parentComp.html
Izveidojiet ievades tekstu ar roktura notikumiem abiem. Ievietojiet bērnu komponentu šajā vecāku komponentā.
< veidne >< zibens - kartes nosaukums = 'vecāks' >
< centrs >
< zibens - ievades etiķete = 'Ievadiet tekstu ar mazajiem burtiem' maiņa = { rokturisNotikums1 } > zibens - ievade >
centrs >
< br >< br >
< centrs >
< zibens - ievades etiķete = 'Ievadiet tekstu ar lielajiem burtiem' maiņa = { rokturisNotikums2 } > zibens - ievade >
centrs >
< br >< br >< br >
< c - childt - sast > c - childt - sast >
zibens - karti >
veidne >
Izvade:
Tagad dodieties uz savu Salesforce organizāciju un ievietojiet vecāku komponentu lapā “Ierakstīt”.
Jūs redzēsit divas teksta ievades UI.
Pirmajā ievadē ierakstīsim tekstu, un jūs redzēsiet, ka teksts tiek pārveidots par lielajiem burtiem un tiek parādīts komponentā Child.
Otrajā ievadē ierakstiet tekstu, un jūs redzēsiet, ka teksts tiek pārveidots par mazajiem burtiem un tiek parādīts komponentā Child.
Bērna komunikācija ar vecākiem
Līdzīgi kā iepriekšējā saziņā, lai informētu bērnu ar vecākiem, abiem komponentiem jābūt saistītiem vienam ar otru. Mēs varam sazināties ar bērnu ar vecāku trīs dažādās pieejās: piezvanot vecākam bērnam, izmantojot vienkāršu notikumu, un izsaucot vecāku bērnam, izmantojot notikumu ar datu un notikumu burbuļošanu. Šajā rokasgrāmatā mēs aplūkosim vienkāršu notikumu.
Lai informētu bērnu ar vecākiem, mums ir jāizveido un jānosūta pasākumi. Šim nolūkam ir jāizveido pielāgots notikums. Pielāgots notikums ir notikums, kuru esat izveidojis pats. Mēs varam to izveidot, izmantojot jauno atslēgvārdu. Notikuma_nosaukums var būt jebkas (tā var būt virkne, kas nav aiz lielajiem burtiem, vai cipari). Pagaidām mēs neapspriedīsim iespējas.
Sintakse : jauns pielāgotais notikums ('Notikuma_nosaukums',{opcijas…})
Tagad jums ir pielāgots pasākums. Nākamais solis ir pasākuma nosūtīšana. Lai nosūtītu notikumu, mums jānorāda notikums, ko izveidojām, izmantojot metodi EventTarget.dispatchEvent().
Sintakse : this.displatchEvent(new CustomEvent('Notikuma_nosaukums',{opcijas…})
Visbeidzot, mums ir jārisina pasākums. Tagad mums ir jāizsauc bērna komponents jūsu vecāku komponentā. Nosūtiet sava notikuma nosaukumu, norādot pasākuma nosaukuma prefiksu “ieslēgts”. Tas aizņem notikumu uztvērēja apstrādātāju.
Sintakse:
< c - bērns - komponents onyourEventName = { klausītājsHandler } > c - bērns - komponents >Piemērs:
Šajā piemērā mēs izveidojam vienu vecāku komponentu (piemērsParent) un divus bērnu komponentus.
- Pirmajā Child (piemērsBērns) mēs izveidojam ievades tekstu, kas ļauj lietotājam sniegt kādu tekstu. Tas pats teksts tiek parādīts komponentā Parent ar lielajiem burtiem.
- Otrajā bērnā (child2) mēs izveidojam ievades tekstu, kas ļauj lietotājam sniegt kādu tekstu. Tas pats teksts tiek parādīts komponentā Parent ar mazajiem burtiem.
piemērsChild.js
Mēs izveidojam metodi HandChange1, kas izveido “linuxhintevent1” CustomEvent ar detalizētu informāciju kā mērķa vērtību. Pēc tam mēs nosūtām šo pasākumu. Ieguliet tālāk norādīto fragmentu šajā “js” failā.
// apstrādā notikumurokturisMainīt1 ( notikumu ) {
notikumu. novērstNoklusējums ( ) ;
konst vārds1 = notikumu. mērķis . vērtību ;
konst atlasiet notikumu1 = jauns CustomEvent ( 'linuxhintevent1' , {
detaļa : vārds1
} ) ;
šis . dispatchEvent ( atlasiet notikumu1 ) ;
}
piemērsBērns.html
Iepriekšējā roktura metode, kas ir izveidota “js”, tiek apstrādāta, pamatojoties uz zibens ievadi HTML komponentā.
< veidne >< zibens - kartes nosaukums = 'Bērns 1' >
< div klasē = 'slds-m-around_medium' >
< zibens - ievades iezīme = 'Ievadiet tekstu ar mazajiem burtiem' maiņa = { rokturisMainīt1 } > zibens - ievade >
div >
zibens - karti >
veidne >
bērns2.js
Mēs izveidojam metodi handleChange2, kas izveido “linuxhintevent2” CustomEvent ar detaļu kā mērķa vērtību. Pēc tam mēs nosūtām šo pasākumu.
rokturisMainīt2 ( notikumu ) {notikumu. novērstNoklusējums ( ) ;
konst vārds2 = notikumu. mērķis . vērtību ;
konst atlasiet Notikums2 = jauns CustomEvent ( 'linuxhintevent2' , {
detaļa : vārds2
} ) ;
šis . dispatchEvent ( atlasiet Notikums2 ) ;
}
bērns2.html
Iepriekšējā roktura metode, kas ir izveidota “js”, tiek apstrādāta, pamatojoties uz zibens ievadi HTML komponentā.
< veidne >< zibens - kartes nosaukums = 'Bērns 2' >
< div klasē = 'slds-m-around_medium' >
< zibens - ievades iezīme = 'Ievadiet tekstu ar lielajiem burtiem' maiņa = { rokturisMainīt2 } > zibens - ievade >
div >
zibens - karti >
veidne >
exampleParent.js: Ieguliet šo fragmentu savā “js” failā klasē.
- Pārvērtiet ievadi par lielajiem burtiem, izmantojot toUpperCase() funkciju HandEvent1() un saglabājiet to mainīgajā Information1
- Pārvērtiet ievadi par mazajiem burtiem, izmantojot toLowerCase() funkciju HandEvent2() un saglabājiet to mainīgajā Information2.
// Pārveidojiet ievadi par lielajiem burtiem, izmantojot funkciju toUpperCase().
// rokturā handleEvent1() un saglabājiet mainīgajā Information1
handEvent1(event) {
const input1 = notikums.detail;
this.Information1 = input1.toUpperCase();
}
@track Information2;
// Pārveidojiet ievadi par mazajiem burtiem, izmantojot funkciju toLowerCase().
// HandEvent2() un saglabājiet mainīgajā Information2
handEvent2(notikums) {
const input2 = notikums.detail;
this.Information2 = input2.to LowerCase();
}
exampleParent.html
Tagad elementā Parent HTML parādiet divus mainīgos (Informācija1 un Informācija2), norādot abus komponentus Child.
< div klasē = 'slds-m-around_medium' >
1. bērns ziņojums ar lielajiem burtiem: < b > {Informācija1} < / b >< br >
2. bērnu ziņojums ar mazajiem burtiem: < b > {Informācija2} < / b >< br >
< / b >< br >
< / div >
< / zibens karte>
< / veidne>
Izvade:
Tagad dodieties uz savu Salesforce organizāciju un ievietojiet vecāku komponentu lapā “Ierakstīt”.
Varat redzēt, ka vecākajā ir divi pakārtotie komponenti.
Ierakstiet tekstu ievades tekstā zem komponenta Child 1. Mēs redzam, ka mūsu teksts tiek parādīts ar lielajiem burtiem komponentā Parent.
Norādiet tekstu ievades tekstā zem komponenta Child 2. Mēs redzam, ka mūsu teksts tiek parādīts ar mazajiem burtiem komponentā Parent.
Var būt arī iespējams ievadīt abus tekstus vienlaikus.
PubSub modelis
Strādājot ar neatkarīgiem komponentiem (kas nav saistīti viens ar otru) un ja vēlaties nosūtīt informāciju no viena komponenta uz otru, varat izmantot šo modeli. PubSub nozīmē Publicēt un abonēt. Komponents, kas nosūta datus, ir zināms kā izdevējs, un komponents, kas saņem datus, ir zināms kā abonents. Lai nosūtītu notikumus starp komponentiem, ir jāizmanto pubsub modulis. Tas jau ir iepriekš definēts un piešķīris Salesforce. Faila nosaukums ir pubsub. Jums ir jāizveido LWC komponents un jāievada šis kods savā javascript failā, kas ir “pubsub.js”.
Piemērs:
Izveidosim divus komponentus – Publicēt un Abonēt.
Programmā Publish mēs ļaujam lietotājiem izveidot ievades tekstu. Noklikšķinot uz pogas, komponentā Abonēt dati tiek saņemti ar lielajiem un mazajiem burtiem.
publish.js
Iegult šo kodu savā JSON failā. Šeit mēs iegūstam informāciju un publicējam informāciju.
Informācijas mainīgais būs ar lielajiem burtiem, bet informācija1 - ar mazajiem burtiem. Noteikti iekļaujiet šo importēšanas paziņojumu koda sākumā — importējiet pubsub no “c/pubsub”.
informācijuinformācija2
// Iegūstiet informāciju ar lielajiem un mazajiem burtiem
informācijas apstrādātājs ( notikumu ) {
šis . informāciju = notikumu. mērķis . vērtību ;
šis . informācija2 = notikumu. mērķis . vērtību ;
}
// Publicējiet gan informāciju (ar lielajiem, gan mazajiem burtiem)
publishHandler ( ) {
krogs. publicēt ( 'Publicēt' , šis . informāciju )
krogs. publicēt ( 'Publicēt' , šis . informācija2 )
}
Tam vajadzētu izskatīties šādi:
publicēt.html
Pirmkārt, mēs izveidojam zibens ievadi, lai pieņemtu tekstu ar apstrādātāja informāciju. Pēc tam tiek izveidota viena poga ar onclick funkcionalitāti. Šīs funkcijas ir iepriekšējā “js” koda fragmentā.
< / zibens karte>
< / veidne>
abonēt.js
Ieguliet šo kodu savā JSON failā. Šeit mēs vispirms abonējam informāciju, pārvēršot to lielos un mazajos burtos atsevišķi metodes callSubscriber () ietvaros. Pēc tam mēs izsaucam šo metodi, izmantojot connectcallback() metodi. Noteikti iekļaujiet šo importēšanas paziņojumu koda sākumā — importējiet pubsub no “c/pubsub”.
informācijuinformācija2
// CallSubscriber() izsaukšana
savienots Atzvans ( ) {
šis . zvansAbonentam ( )
}
// Abonējiet informāciju, pārvēršot par lielajiem burtiem
zvansAbonentam ( ) {
krogs. abonēt ( 'Publicēt' , ( informāciju ) => {
šis . informāciju = informāciju. uz Lielajiem burtiem ( ) ;
} ) ,
// Abonējiet informāciju, pārvēršot par mazajiem burtiem
krogs. abonēt ( 'Publicēt' , ( informācija2 ) => {
šis . informācija2 = informācija2. mazajiem burtiem ( ) ;
} )
}
Tam vajadzētu izskatīties šādi:
abonēt.html
Mēs attēlojam tekstu ar lielajiem (saglabāts informācijā) un mazajiem (uzglabātas informācijā2).
< div klasē = 'slds-p-around_medium' >
Informācija saņemta ar lielajiem burtiem - < b > {informācija} < / b >< br >
Informācija saņemta ar mazajiem burtiem - < b > {informācija2} < / b >
< / div >
< / zibens karte>
< / veidne>
Izvade:
Pievienojiet savai lapai šos divus komponentus. Pārliecinieties, vai abi komponenti atrodas vienā lapā. Pretējā gadījumā funkcionalitāte nedarbosies.
Ievadīsim tekstu komponentā “Publicēt” un noklikšķiniet uz pogas “Sūtīt datus”. Mēs redzam, ka teksts tiek saņemts ar lielajiem un mazajiem burtiem.
Secinājums
Tagad mēs varam sazināties ar LWC komponentiem, izmantojot Salesforce LWC pasākuma koncepciju. Šīs rokasgrāmatas ietvaros mēs uzzinājām, kā sazināties no vecākiem ar bērnu un no bērna ar vecākiem. PubSub modelis tiek izmantots, ja jūsu komponenti nav saistīti viens ar otru (nevis vecāki — bērns). Katrs scenārijs ir izskaidrots ar vienkāršu piemēru, un pārliecinieties, vai failā “meta-xml” ir iekļauts kods, kas ir norādīts šīs rokasgrāmatas sākumā.