LWC įvykiai naudojami bendrauti su komponentais. Jei yra susijusių komponentų, gali būti įmanoma bendrauti iš tėvų su vaiku arba iš vaiko su tėvu. Jei yra du nesusiję komponentai, galime susisiekti naudodami „PubSub“ („Publish-Subscribe“) modelį arba „Lightning Message Service“ (LMS). Šiame vadove aptarsime, kaip bendrauti su įvykiais nuo tėvų iki vaiko, nuo vaiko iki tėvo ir tarpusavyje susijusiais komponentais naudojant PubSub modelį.
Komponentus galite įdėti į įrašų puslapį, programos puslapį arba pagrindinį puslapį. Mes daugiau nenurodysime šio failo (meta-xml) pagal pavyzdinius kodo fragmentus:
xml versija = '1.0' ?>
< LightningComponentBundle xmlns = http://soap.sforce.com/2006/04/metadata >
< apiVersion > 57,0 apiVersion >
< isExposed > tiesa isExposed >
< tikslus >
< taikinys > lightning__RecordPage taikinys >
< taikinys > lightning__AppPage taikinys >
< taikinys > žaibas__Pagrindinis puslapis taikinys >
tikslus >
LightningComponentBundle >
Tėvų ir vaikų bendravimas
Jei du komponentai yra susiję vienas su kitu, toks ryšys yra įmanomas. Čia Tėvas siunčia duomenis Vaikui. Pirminiame komponente yra antrinis komponentas. Taikydami šį metodą, galime perduoti pirminius duomenis (sveikąjį skaičių, eilutę, loginį skaičių ir tt) iš pirminės reikšmės vaikui, o ne pirminius duomenis (masyvas, objektas, objektų masyvas ir t. t.) iš pirminio į kitą, perduodant duomenis Vaiko komponentas su veiksmu Tėvui.
Norėdami perduoti informaciją iš tėvų vaikui, turime padaryti viešai matomus komponento Vaikas laukus, ypatybes ir metodus. Tai galima padaryti dekoruojant laukus, savybes ir būdus su „api“ dekoratoriumi.
Pavyzdys : deklaruokite kintamąjį su „api“ antrinio komponento „js“ faile.
@ api kintamasis ;
Dabar komponentas Parent naudoja HTML failo komponentą Child per HTML atributus.
Pavyzdys : naudokite kintamąjį pagrindiniame HTML faile.
< c - vaikas - comp kintamasis > c - vaikas - komp >
Aptarkime keletą pavyzdžių, apibūdinančių, kaip bendrauti su tėvais su vaiku.
1 pavyzdys:
Šis pagrindinis pavyzdys parodo, kaip gauti informaciją, kurią Tėvas siunčia vaikui.
childtComp.js
Pirmiausia sukuriame antrinį komponentą, kuriame yra „informacijos“ kintamasis, kuris yra viešai prieinamas.
// Paskelbkite kintamąjį kaip viešą naudodami api dekoratorių@ api informacija
Visą „js“ kodą galite peržiūrėti šioje ekrano kopijoje:
childtComp.html
Dabar šį kintamąjį nurodome HTML faile centrinėje žymoje.
< šabloną >< žaibas - kortelės pavadinimas = 'Vaikas' >
< centras >
< b > { informacija } b >
centras >
žaibas - kortelę >
šabloną >
parentComp.js
Mes nieko nedarome „js“ faile.
parentComp.html
Įdėkite ankstesnį antrinį komponentą į pagrindinį HTML, perduodami viešąjį kintamąjį (informaciją) su tekstu.
< šabloną >< žaibas - kortelės pavadinimas = 'Tėvai' piktogramą - vardas = 'standartas: paskyra' >
< c - childt - komp
informacija = 'Sveiki, gavau informaciją...'
> c - childt - komp >
žaibas - kortelę >
šabloną >
Išvestis:
Dabar eikite į „Salesforce“ organizaciją ir įdėkite „Parent“ komponentą į puslapį „Įrašyti“. Pamatysite, kad komponentas Vaikas informaciją gavo iš tėvų.
2 pavyzdys:
Sukurkime du įvesties teksto laukus, kurie dinamiškai priims tekstą iš vartotojo sąsajos pagrindiniame komponente. Jei įterpiame pirmąjį tekstą į pagrindinį komponentą, antrinis komponentas gauna šį tekstą didžiosiomis raidėmis. Panašiai jis gauna tekstą mažosiomis raidėmis, jei įterpiame antrąjį tekstą.
childtComp.js
Su takelio dekoratoriumi sukurkite du kintamuosius – informacija1 ir informacija2.
- Sukurkite convertToUpper() metodą naudodami „api“ dekoratorių, kuris konvertuoja pirmąjį įvesties tekstą į didžiąsias raides.
- Sukurkite convertToLower() metodą naudodami „api“ dekoratorių, kuris konvertuoja antrąjį įvesties tekstą į mažąsias raides.
@ takelio informacija2 ;
@ api
convertToUpper ( faktinė informacija1 ) {
tai . Informacija1 = faktinė informacija1. į didžiąsias raides ( ) ;
}
@ api
convertToLower ( faktinė informacija1 ) {
tai . Informacija2 = faktinė informacija1. į mažąsias raides ( ) ;
}
Visas „js“ kodas atrodo taip:
childtComp.html
Rodome reikšmes (Information1 ir Information2), kurios gaunamos iš „js“ failo.
< šabloną >< žaibas - kortelės pavadinimas = 'Vaikas' >
Didžioji raidė :& nbsp ; < b > { Informacija1 } b >< br >
Mažosios raidės :& nbsp ; < b > { Informacija2 } b >
žaibas - kortelę >
šabloną >
parentComp.js
Sukuriame du tvarkyklės metodus, kurie pasirenka antrinį HTML šabloną naudodami querySelector(). Įsitikinkite, kad turite perduoti teisingus metodus, kurie konvertuoja tekstą į didžiąsias arba mažąsias raides.
rankenaĮvykis1 ( įvykis ) {tai . šabloną . querySelector ( 'c-childt-comp' ) . convertToUpper ( renginys. taikinys . vertė ) ;
}
rankenaĮvykis2 ( įvykis ) {
tai . šabloną . querySelector ( 'c-childt-comp' ) . convertToLower ( renginys. taikinys . vertė ) ;
}
Visas „js“ kodas atrodo taip:
parentComp.html
Sukurkite įvesties tekstą su abiejų jų įvykiais. Įdėkite vaiko komponentą į šį tėvų komponentą.
< šabloną >< žaibas - kortelės pavadinimas = 'Tėvai' >
< centras >
< žaibas - įvesties etiketė = 'Įveskite tekstą mažosiomis raidėmis' pakeitimas = { rankenaĮvykis1 } > žaibas - įvestis >
centras >
< br >< br >
< centras >
< žaibas - įvesties etiketė = 'Įveskite tekstą didžiosiomis raidėmis' pakeitimas = { rankenaĮvykis2 } > žaibas - įvestis >
centras >
< br >< br >< br >
< c - vaikas - komp > c - childt - komp >
žaibas - kortelę >
šabloną >
Išvestis:
Dabar eikite į savo „Salesforce“ organizaciją ir „Parent“ komponentą įdėkite į puslapį „Įrašyti“.
UI matysite dvi teksto įvestis.
Parašykime tekstą pirmoje įvestyje ir pamatysite, kad tekstas paverčiamas didžiosiomis raidėmis ir rodomas komponente Vaikas.
Parašykite tekstą antroje įvestyje ir pamatysite, kad tekstas paverčiamas mažosiomis raidėmis ir rodomas komponente Vaikas.
Vaiko bendravimas su tėvais
Panašiai kaip ir ankstesniame komunikate, norint perduoti Vaiką Tėvui, abu komponentai turi būti susiję vienas su kitu. Mes galime pranešti apie vaiką tėvui trimis skirtingais būdais: paskambinti tėvui vaikui naudojant paprastą įvykį ir iškviesti tėvą vaikui naudojant įvykį su duomenimis ir įvykių burbuliavimu. Šiame vadove apžvelgsime paprastą įvykį.
Kad galėtume perduoti Vaiką Tėvams, turime sukurti ir išsiųsti renginius. Tam reikia sukurti pasirinktinį įvykį. Pasirinktinis įvykis yra jūsų sukurtas įvykis. Galime jį sukurti naudodami naują raktinį žodį. Įvykio_pavadinimas gali būti bet koks (tai gali būti eilutė, išskyrus didžiąsias raides, arba skaitmenys). Kol kas nesvarstysime variantų.
Sintaksė : naujas tinkintas įvykis ('Įvykio_pavadinimas',{parinktys...})
Dabar turite tinkintą įvykį. Kitas žingsnis – renginio išsiuntimas. Norėdami išsiųsti įvykį, turime nurodyti įvykį, kurį sukūrėme EventTarget.dispatchEvent() metodu.
Sintaksė : this.displatchEvent(new CustomEvent('Įvykio_pavadinimas',{parinktys...})
Galiausiai turime sutvarkyti įvykį. Dabar turime iškviesti antrinį komponentą pagrindiniame komponente. Perduokite įvykio pavadinimą nurodydami įvykio pavadinimo priešdėlį „įjungta“. Tam reikia įvykių klausytojo tvarkyklės.
Sintaksė:
< c - vaikas - komponentas onyourEventName = { klausytojasHandleris } > c - vaikas - komponentas >Pavyzdys:
Šiame pavyzdyje sukuriame vieną pagrindinį komponentą (pavyzdysParent) ir du antrinius komponentus.
- Pirmajame vaikas (pavyzdysChild) sukuriame įvesties tekstą, leidžiantį vartotojui pateikti tam tikrą tekstą. Tas pats tekstas rodomas komponente Parent didžiosiomis raidėmis.
- Antrajame vaikas (child2) sukuriame įvesties tekstą, kuris leidžia vartotojui pateikti tam tikrą tekstą. Tas pats tekstas rodomas komponente Parent mažosiomis raidėmis.
pavyzdysChild.js
Sukuriame „handleChange1“ metodą, kuris sukuria „linuxhintevent1“ CustomEvent su išsamia tiksline verte. Po to mes išsiunčiame šį renginį. Į šį „js“ failą įterpkite šį fragmentą.
// tvarkyti įvykįrankenaKeisti1 ( įvykis ) {
renginys. užkirsti keliąNumatytasis ( ) ;
konst vardas1 = renginys. taikinys . vertė ;
konst pasirinkite 1 įvykį = naujas CustomEvent ( 'linuxhintevent1' , {
detalė : vardas1
} ) ;
tai . dispatchEvent ( pasirinkite 1 įvykį ) ;
}
pavyzdysVaikas.html
Ankstesnis tvarkyklės metodas, sukurtas „js“, tvarkomas pagal žaibo įvestį HTML komponente.
< šabloną >< žaibas - kortelės pavadinimas = 'Vaikas 1' >
< div klasė = 'slds-m-around_medium' >
< žaibas - įvesties etiketė = „Įveskite tekstą mažosiomis raidėmis“ pakeitimas = { rankenaKeisti1 } > žaibas - įvestis >
div >
žaibas - kortelę >
šabloną >
vaikas2.js
Sukuriame „handleChange2“ metodą, kuris sukuria „linuxhintevent2“ CustomEvent su detale kaip tiksline verte. Po to mes išsiunčiame šį renginį.
rankenaKeisti2 ( renginys ) {įvykis. užkirsti keliąNumatytasis ( ) ;
konst vardas2 = įvykis. taikinys . vertė ;
konst pasirinkite 2 įvykį = naujas CustomEvent ( 'linuxhintevent2' , {
detalė : vardas2
} ) ;
tai . dispatchEvent ( pasirinkite 2 įvykį ) ;
}
vaikas2.html
Ankstesnis tvarkyklės metodas, sukurtas „js“, tvarkomas pagal žaibo įvestį HTML komponente.
< šabloną >< žaibas - kortelės pavadinimas = 'Vaikas 2' >
< div klasė = 'slds-m-around_medium' >
< žaibas - įvesties etiketė = „Įveskite tekstą didžiosiomis raidėmis“ pakeitimas = { rankenaKeisti2 } > žaibas - įvestis >
div >
žaibas - kortelę >
šabloną >
exampleParent.js: Įdėkite šį fragmentą į „js“ failą klasėje.
- Konvertuokite įvestį į didžiąsias raides naudodami toUpperCase() funkciją HandelEvent1() ir išsaugokite ją kintamajame Information1
- Konvertuokite įvestį į mažąsias raides naudodami toLowerCase() funkciją HandelEvent2() ir išsaugokite ją kintamajame Information2.
// Konvertuokite įvestį į didžiąsias raides naudodami funkciją toUpperCase().
// HandelEvent1() ir saugokite Information1 kintamąjį
handEvent1(įvykis) {
const input1 = įvykis.detail;
this.Information1 = input1.toUpperCase();
}
@track Informacija2;
// Konvertuokite įvestį į mažąsias raides naudodami funkciją toLowerCase().
// HandelEvent2() ir saugokite Information2 kintamajame
handleEvent2(įvykis) {
const input2 = įvykis.detail;
this.Information2 = input2.to LowerCase();
}
exampleParent.html
Dabar pagrindiniame HTML komponente parodykite du kintamuosius (Information1 ir Information2), nurodydami abu komponentus antrinis.
<šablonas><žaibo korta titulą = 'Tėvai' >
< div klasė = 'slds-m-around_medium' >
Vaiko 1 pranešimas didžiosiomis raidėmis : < b > {Informacija1} < / b >< br >
Vaiko 2 pranešimas mažosiomis raidėmis: < b > {Informacija2} < / b >< br >
< / b >< br >
< / div >
< / žaibo korta>
< / šablonas>
Išvestis:
Dabar eikite į savo „Salesforce“ organizaciją ir „Parent“ komponentą įdėkite į puslapį „Įrašyti“.
Matote, kad pirminėje dalyje yra du antriniai komponentai.
Įveskime tekstą į įvesties tekstą po komponentu 1 vaikas. Matome, kad mūsų tekstas pagrindiniame komponente rodomas didžiosiomis raidėmis.
Pateikite tekstą įvesties tekste po komponentu Vaikas 2. Matome, kad mūsų tekstas pagrindiniame komponente rodomas mažosiomis raidėmis.
Taip pat galima įvesti abu tekstus vienu metu.
PubSub modelis
Kai dirbate su nepriklausomais komponentais (nesusiais vienas su kitu) ir norite siųsti informaciją iš vieno komponento į kitą, galite naudoti šį modelį. PubSub reiškia publikuoti ir prenumeruoti. Komponentas, kuris siunčia duomenis, yra žinomas kaip leidėjas, o komponentas, kuris gauna duomenis, yra žinomas kaip abonentas. Norint siųsti įvykius tarp komponentų, reikia naudoti pubsub modulį. Tai jau iš anksto nustatyta ir suteikta „Salesforce“. Failo pavadinimas yra pubsub. Turite sukurti LWC komponentą ir įvesti šį kodą į savo javascript failą, kuris yra „pubsub.js“.
Pavyzdys:
Sukurkime du komponentus – Publikuoti ir Prenumeruoti.
Skiltyje Publish leidžiame vartotojams sukurti įvesties tekstą. Paspaudus mygtuką, prenumeratos komponente duomenys gaunami didžiosiomis ir mažosiomis raidėmis.
publikuoti.js
Įdėkite šį kodą į JSON failą. Čia mes gauname informaciją ir skelbiame informaciją.
Informacinis kintamasis bus rašomas didžiosiomis raidėmis, o informacija1 – mažosiomis raidėmis. Įsitikinkite, kad įtraukėte šį importavimo teiginį kodo pradžioje – importuokite pubsub iš „c/pubsub“.
informacijainformacija2
// Gauti informaciją didžiosiomis ir mažosiomis raidėmis
informacijos tvarkytojas ( įvykis ) {
tai . informacija = įvykis. taikinys . vertė ;
tai . informacija2 = įvykis. taikinys . vertė ;
}
// Paskelbkite informaciją (didžiosiomis ir mažosiomis raidėmis)
publishHandler ( ) {
pubsub. paskelbti ( 'Paskelbti' , tai . informacija )
pubsub. paskelbti ( 'Paskelbti' , tai . informacija2 )
}
Tai turėtų atrodyti taip:
publikuoti.html
Pirmiausia sukuriame žaibo įvestį, kad priimtume tekstą su tvarkyklės informacija. Po to sukuriamas vienas mygtukas su onclick funkcija. Šios funkcijos yra ankstesniame „js“ kodo fragmente.
<šablonas><žaibo korta titulą = „Paskelbti savo tekstą“ >
<žaibo įvestis tipo = 'tekstas' onkeyup = { informacijos tvarkytojas } >< / žaibo įvestis>
<žaibo mygtukas paspaudus = { publishHandler } etiketė = 'Siųsti duomenis' >< / žaibo mygtukas>
< / žaibo korta>
< / šablonas>
subscribe.js
Įdėkite šį kodą į JSON failą. Čia pirmiausia užsiprenumeruojame informaciją, konvertuodami ją į didžiąsias ir mažąsias raides atskirai, naudojant callSubscriber() metodą. Po to mes iškviečiame šį metodą naudodami prisijungimo atgal () metodą. Įsitikinkite, kad įtraukėte šį importavimo teiginį kodo pradžioje – importuokite pubsub iš „c/pubsub“.
informacijainformacija2
// iškviečiamas callSubscriber()
prijungtas atgalinis skambutis ( ) {
tai . skambinti abonentui ( )
}
// Prenumeruokite informaciją konvertuodami į didžiąsias raides
skambinti abonentui ( ) {
pubsub. Prenumeruoti ( 'Paskelbti' , ( informacija ) => {
tai . informacija = informacija. į didžiąsias raides ( ) ;
} ) ,
// Prenumeruokite informaciją konvertuodami į mažąsias raides
pubsub. Prenumeruoti ( 'Paskelbti' , ( informacija2 ) => {
tai . informacija2 = informacija2. į mažąsias raides ( ) ;
} )
}
Tai turėtų atrodyti taip:
subscribe.html
Tekstą rodome didžiosiomis (saugoma informacija) ir mažosiomis (saugoma informacija2).
<šablonas><žaibo korta titulą = 'Prenumeruoti' >
< div klasė = 'slds-p-around_medium' >
Informacija gauta didžiosiomis raidėmis - < b > {informacija} < / b >< br >
Informacija gauta mažosiomis raidėmis - < b > {informacija2} < / b >
< / div >
< / žaibo korta>
< / šablonas>
Išvestis:
Pridėkite šiuos du komponentus prie savo puslapio. Įsitikinkite, kad abu komponentai yra tame pačiame puslapyje. Priešingu atveju funkcionalumas neveiks.
Įveskime tekstą į „Skelbti“ komponentą ir spustelėkite mygtuką „Siųsti duomenis“. Matome, kad tekstas gaunamas didžiosiomis ir mažosiomis raidėmis.
Išvada
Dabar mes galime susisiekti su LWC komponentais per Salesforce LWC renginio koncepciją. Vykdydami šį vadovą išmokome bendrauti iš tėvų su vaiku ir iš vaiko su tėvu. PubSub modelis naudojamas tuo atveju, jei jūsų komponentai nėra susiję vienas su kitu (ne tėvas – vaikas). Kiekvienas scenarijus paaiškinamas paprastu pavyzdžiu ir įsitikinkite, kad į „meta-xml“ failą įtraukėte kodą, pateiktą šio vadovo pradžioje.