Acara dalam LWC digunakan untuk berkomunikasi dengan komponen. Jika terdapat komponen yang berkaitan, anda boleh berkomunikasi daripada Ibu Bapa kepada Anak atau Anak kepada Ibu Bapa. Jika terdapat dua komponen yang tidak berkaitan, kami boleh berkomunikasi melalui model PubSub (Terbitkan-Langgan) atau dengan Lightning Message Service (LMS). Dalam panduan ini, kita akan membincangkan tentang cara berkomunikasi dengan acara daripada Ibu Bapa kepada Anak, Anak kepada Ibu Bapa dan komponen yang saling berkaitan menggunakan model PubSub.
Anda boleh meletakkan komponen dalam Halaman Rekod, Halaman Apl atau Halaman Utama anda. Kami tidak akan menentukan fail ini (meta-xml) sekali lagi di bawah coretan kod contoh:
versi xml = '1.0' ?>
< LightningComponentBundle xmlns = 'http://soap.sforce.com/2006/04/metadata' >
< apiVersion > 57.0 apiVersion >
< adalah Terdedah > benar adalah Terdedah >
< sasaran >
< sasaran > kilat__RekodPage sasaran >
< sasaran > kilat__AppPage sasaran >
< sasaran > kilat__Laman Utama sasaran >
sasaran >
KilatKomponenBundle >
Komunikasi Ibu Bapa kepada Anak
Jika dua komponen berkaitan antara satu sama lain, komunikasi ini boleh dilakukan. Di sini, Ibu Bapa menghantar data kepada Anak. Komponen induk memegang komponen Anak. Dengan pendekatan ini, kita boleh menghantar data Primitif (Integer, String, Boolean, dll) daripada Ibu Bapa kepada Anak, menghantar data Bukan Primitif (Array, Objek, Tatasusunan Objek, dll) daripada Ibu Bapa kepada Anak, menghantar data kepada komponen Kanak-kanak dengan tindakan pada Ibu Bapa.
Untuk menyampaikan Ibu Bapa kepada Anak, kita perlu menjadikan medan, sifat dan kaedah tersedia dalam komponen Anak boleh dilihat secara terbuka. Ini boleh dilakukan dengan menghias medan, sifat dan kaedah dengan penghias 'api'.
Contoh : Isytiharkan pembolehubah dengan “api” dalam fail “js” komponen Kanak-kanak.
@ pembolehubah api ;
Kini, komponen Induk menggunakan komponen Anak dalam fail HTML melalui atribut HTML.
Contoh : Gunakan pembolehubah dalam fail HTML Induk.
< c - anak - pembolehubah kompaun > c - anak - kompaun >
Mari bincangkan beberapa contoh yang menerangkan cara berkomunikasi dengan Ibu Bapa kepada Anak.
Contoh 1:
Contoh asas ini menunjukkan mendapatkan maklumat yang dihantar oleh Ibu Bapa kepada Anak.
childtComp.js
Mula-mula, kami mencipta komponen Kanak-kanak yang memegang pembolehubah 'maklumat' yang tersedia secara umum.
// Isytiharkan pembolehubah sebagai awam menggunakan Penghias api@ maklumat api
Anda boleh melihat keseluruhan kod 'js' dalam tangkapan skrin berikut:
childtComp.html
Sekarang, kami menentukan pembolehubah ini dalam fail HTML dalam teg tengah.
< templat >< kilat - tajuk kad = 'Anak' >
< pusat >
< b > { maklumat } b >
pusat >
kilat - kad >
templat >
parentComp.js
Kami tidak melakukan apa-apa dalam fail 'js'.
parentComp.html
Letakkan komponen Anak sebelumnya dalam HTML Induk anda dengan menghantar pembolehubah awam (maklumat) dengan beberapa teks.
< templat >< kilat - tajuk kad = 'Ibu bapa' ikon - nama = 'standard:account' >
< c - childt - kompaun
maklumat = 'Hello, saya menerima maklumat...'
> c - childt - kompaun >
kilat - kad >
templat >
Pengeluaran:
Sekarang, pergi ke Organisasi Salesforce anda dan letakkan komponen Induk pada halaman 'Rekod'. Anda akan melihat bahawa komponen Kanak-kanak menerima maklumat daripada Ibu Bapa.
Contoh 2:
Mari buat dua medan teks input yang akan menerima teks secara dinamik daripada UI dalam komponen Induk. Jika kita memasukkan teks pertama dalam komponen Induk, komponen anak menerima teks ini dalam huruf besar. Begitu juga, ia menerima teks dalam huruf kecil jika kita memasukkan teks kedua.
childtComp.js
Cipta dua pembolehubah – maklumat1 dan maklumat2 – dengan penghias trek.
- Cipta kaedah convertToUpper() dengan penghias 'api' yang menukar teks input pertama kepada huruf besar.
- Cipta kaedah convertToLower() dengan penghias 'api' yang menukar teks input kedua kepada huruf kecil.
@ trek Maklumat2 ;
@ api
convertToUpper ( maklumat sebenar1 ) {
ini . Maklumat1 = maklumat sebenar1. toUpperCase ( ) ;
}
@ api
convertToLower ( maklumat sebenar1 ) {
ini . Maklumat2 = maklumat sebenar1. kepadaLowerCase ( ) ;
}
Keseluruhan kod 'js' kelihatan seperti berikut:
childtComp.html
Kami memaparkan nilai (Maklumat1 dan Maklumat2) yang datang daripada fail 'js'.
< templat >< kilat - tajuk kad = 'Anak' >
Huruf Besar :& nbsp ; < b > { Maklumat1 } b >< br >
Huruf Kecil :& nbsp ; < b > { Maklumat2 } b >
kilat - kad >
templat >
parentComp.js
Kami mencipta dua kaedah pengendali yang memilih templat HTML kanak-kanak melalui querySelector(). Pastikan anda perlu lulus kaedah yang betul yang menukar teks kepada huruf besar atau huruf kecil.
mengendalikanAcara1 ( peristiwa ) {ini . templat . querySelector ( 'c-childt-comp' ) . convertToUpper ( peristiwa. sasaran . nilai ) ;
}
mengendalikanAcara2 ( peristiwa ) {
ini . templat . querySelector ( 'c-childt-comp' ) . convertToLower ( peristiwa. sasaran . nilai ) ;
}
Keseluruhan kod 'js' kelihatan seperti berikut:
parentComp.html
Buat teks input dengan acara pemegang untuk kedua-duanya. Letakkan komponen Anak dalam komponen Induk ini.
< templat >< kilat - tajuk kad = 'Ibu bapa' >
< pusat >
< kilat - label input = 'Masukkan teks dalam huruf kecil' onchange = { mengendalikanAcara1 } > kilat - input >
pusat >
< br >< br >
< pusat >
< kilat - label input = 'Masukkan teks dalam huruf besar' onchange = { mengendalikanAcara2 } > kilat - input >
pusat >
< br >< br >< br >
< c - childt - kompaun > c - childt - kompaun >
kilat - kad >
templat >
Pengeluaran:
Sekarang, pergi ke Organisasi Salesforce anda dan letakkan komponen Induk pada halaman 'Rekod'.
Anda akan melihat dua input teks pada UI.
Mari tulis beberapa teks dalam input pertama dan anda akan melihat bahawa teks itu ditukar kepada huruf besar dan dipaparkan dalam komponen Kanak-kanak.
Tulis beberapa teks dalam input kedua dan anda akan melihat bahawa teks itu ditukar kepada huruf kecil dan dipaparkan dalam komponen Kanak-kanak.
Komunikasi Anak kepada Ibu Bapa
Sama seperti komunikasi sebelumnya, untuk menyampaikan Anak kepada Ibu Bapa, kedua-dua komponen harus berkait antara satu sama lain. Kita boleh menyampaikan Anak kepada Ibu Bapa dalam tiga pendekatan berbeza: memanggil Ibu Bapa kepada Anak menggunakan acara mudah dan memanggil Ibu Bapa kepada Anak menggunakan peristiwa dengan data dan peristiwa menggelegak. Kami akan melihat peristiwa mudah dalam panduan ini.
Untuk menyampaikan Anak kepada Ibu Bapa, kita perlu mencipta dan menghantar acara. Untuk itu, acara tersuai perlu dibuat. Acara tersuai ialah acara yang dibuat oleh anda sendiri. Kita boleh menciptanya menggunakan kata kunci baharu. Event_Name boleh menjadi apa-apa sahaja (ia boleh menjadi rentetan, bukan melebihi huruf besar atau digit). Buat masa ini, kami tidak akan membincangkan pilihan.
Sintaks : CustomEvent(‘Nama_Acara’,{pilihan…})
Kini, anda mempunyai acara tersuai. Langkah seterusnya ialah menghantar acara. Untuk menghantar acara, kami perlu menentukan acara yang kami buat dalam kaedah EventTarget.dispatchEvent().
Sintaks : this.displatchEvent(New CustomEvent(‘Event_Name’,{options…})
Akhirnya, kami perlu mengendalikan acara itu. Sekarang, kita perlu memanggil komponen anak dalam komponen Ibu Bapa anda. Lulus nama acara anda dengan menyatakan awalan 'hidup' pada nama acara anda. Ini memerlukan pengendali pendengar acara.
Sintaks:
< c - anak - komponen padaNamaAcara anda = { pendengarHandler } > c - anak - komponen >Contoh:
Dalam contoh ini, kami mencipta satu komponen Induk (exampleParent) dan dua komponen Anak.
- Dalam Anak pertama (exampleChild), kami mencipta teks input yang membolehkan pengguna menyediakan beberapa teks. Teks yang sama dipaparkan dalam komponen Induk dalam huruf besar.
- Dalam Kanak-kanak kedua (kanak-kanak2), kami mencipta teks input yang membolehkan pengguna menyediakan beberapa teks. Teks yang sama dipaparkan dalam komponen Induk dalam huruf kecil.
exampleChild.js
Kami mencipta kaedah handleChange1 yang mencipta “linuxhintevent1” CustomEvent dengan butiran sebagai nilai sasaran. Selepas itu, kami menghantar acara ini. Benamkan coretan berikut dalam fail 'js' ini.
// mengendalikan acaramengendalikanTukar1 ( peristiwa ) {
peristiwa. preventDefault ( ) ;
const nama1 = peristiwa. sasaran . nilai ;
const pilihAcara1 = baru CustomEvent ( 'linuxhintevent1' , {
terperinci : nama1
} ) ;
ini . dispatchEvent ( pilihAcara1 ) ;
}
exampleChild.html
Kaedah pemegang sebelumnya yang dibuat dalam 'js' dikendalikan berdasarkan input kilat dalam komponen HTML.
< templat >< kilat - tajuk kad = 'Anak 1' >
< div kelas = 'slds-m-around_medium' >
< kilat - masukkan label = 'Masukkan Teks dalam huruf kecil' onchange = { mengendalikanTukar1 } > kilat - input >
div >
kilat - kad >
templat >
kanak2.js
Kami mencipta kaedah handleChange2 yang mencipta CustomEvent 'linuxhintevent2' dengan butiran sebagai nilai sasaran. Selepas itu, kami menghantar acara ini.
mengendalikanTukar2 ( peristiwa ) {peristiwa. preventDefault ( ) ;
const nama2 = peristiwa. sasaran . nilai ;
const pilihAcara2 = baru CustomEvent ( 'linuxhintevent2' , {
terperinci : nama2
} ) ;
ini . dispatchEvent ( pilihAcara2 ) ;
}
kanak2.html
Kaedah pemegang sebelumnya yang dibuat dalam 'js' dikendalikan berdasarkan input kilat dalam komponen HTML.
< templat >< kilat - tajuk kad = 'Anak 2' >
< div kelas = 'slds-m-around_medium' >
< kilat - masukkan label = 'Masukkan Teks dalam huruf besar' onchange = { mengendalikanTukar2 } > kilat - input >
div >
kilat - kad >
templat >
exampleParent.js: Benamkan coretan ini dalam fail 'js' anda di dalam kelas.
- Tukar input kepada huruf besar menggunakan fungsi toUpperCase() dalam handleEvent1() dan simpannya dalam pembolehubah Information1
- Tukar input kepada huruf kecil menggunakan fungsi toLowerCase() dalam handleEvent2() dan simpannya dalam pembolehubah Information2.
// Tukar input kepada huruf besar menggunakan fungsi toUpperCase().
// dalam handleEvent1() dan simpan dalam pembolehubah Information1
handleEvent1(event) {
input const1 = peristiwa.perincian;
ini.Maklumat1 = input1.toUpperCase();
}
@trek Maklumat2;
// Tukar input kepada huruf kecil menggunakan fungsi toLowerCase().
// dalam handleEvent2() dan simpan dalam pembolehubah Information2
handleEvent2(event) {
input2 const = peristiwa.perincian;
ini.Maklumat2 = input2.toLowerCase();
}
exampleParent.html
Sekarang, paparkan dua pembolehubah (Maklumat1 & Maklumat2) dalam komponen HTML Induk dengan menyatakan kedua-dua komponen Anak.
< div kelas = 'slds-m-around_medium' >
Mesej Child-1 dalam Huruf Besar : < b > {Maklumat1} < / b >< br >
Mesej Kanak-2 dalam Huruf Kecil : < b > {Maklumat2} < / b >< br >
< / b >< br >
< / div >
< / kad kilat>
< / templat>
Pengeluaran:
Sekarang, pergi ke Organisasi Salesforce anda dan letakkan komponen Induk pada halaman 'Rekod'.
Anda boleh melihat bahawa dua komponen Kanak-kanak wujud dalam Ibu Bapa.
Mari taip beberapa teks dalam teks input di bawah komponen Kanak-kanak 1. Kita dapat melihat bahawa teks kita dipaparkan dalam huruf besar pada komponen Induk.
Berikan beberapa teks dalam teks input di bawah komponen Kanak-kanak 2. Kita dapat melihat bahawa teks kita dipaparkan dalam huruf kecil pada komponen Induk.
Anda juga boleh memasukkan kedua-dua teks pada satu masa.
Model PubSub
Apabila anda bekerja dengan komponen bebas (tidak berkaitan antara satu sama lain) dan jika anda ingin menghantar maklumat dari satu komponen ke komponen lain, anda boleh menggunakan model ini. PubSub adalah singkatan dari Publish and Subscribe. Komponen yang menghantar data dikenali sebagai Penerbit dan komponen yang menerima data dikenali sebagai Pelanggan. Ia dikehendaki menggunakan modul pubsub untuk menghantar peristiwa antara komponen. Ia sudah dipratakrifkan dan diberikan oleh Salesforce. Nama fail ialah pubsub. Anda perlu mencipta komponen LWC dan taip kod ini dalam fail javascript anda iaitu 'pubsub.js'.
Contoh:
Mari buat dua komponen - Terbitkan dan Langgan.
Dalam Terbitkan, kami membenarkan pengguna membuat teks input. Dengan mengklik butang, data diterima dalam huruf besar dan huruf kecil dalam komponen Langgan.
publish.js
Benamkan kod ini dalam fail JSON anda. Di sini, kami mendapat maklumat dan menerbitkan maklumat tersebut.
Pembolehubah maklumat akan menjadi huruf besar dan maklumat1 akan menjadi huruf kecil. Pastikan anda memasukkan pernyataan import ini pada permulaan kod – import pubsub daripada ‘c/pubsub’.
maklumatmaklumat2
// Dapatkan Maklumat dalam huruf besar dan huruf kecil
pengendali maklumat ( peristiwa ) {
ini . maklumat = peristiwa. sasaran . nilai ;
ini . maklumat2 = peristiwa. sasaran . nilai ;
}
// Terbitkan kedua-dua maklumat (dalam huruf besar dan huruf kecil)
publishHandler ( ) {
pubsub. menerbitkan ( 'Menerbitkan' , ini . maklumat )
pubsub. menerbitkan ( 'Menerbitkan' , ini . maklumat2 )
}
Ia sepatutnya kelihatan seperti:
publish.html
Mula-mula, kami mencipta input kilat untuk menerima teks dengan maklumat pengendali. Selepas itu, satu butang dibuat dengan fungsi onclick. Fungsi ini terdapat dalam coretan kod 'js' sebelumnya.
menaip = 'teks' onkeyup = { pengendali maklumat } >< / masukan kilat>
< / kad kilat>
< / templat>
subscribe.js
Benamkan kod ini dalam fail JSON anda. Di sini, kami mula-mula Langgan maklumat dengan menukarnya kepada huruf besar dan huruf kecil secara berasingan di dalam kaedah callSubscriber(). Selepas itu, kami menggunakan kaedah ini melalui kaedah connectedcallback(). Pastikan anda memasukkan pernyataan import ini pada permulaan kod – import pubsub daripada ‘c/pubsub’.
maklumatmaklumat2
// menggunakan callSubscriber()
disambungPanggil balik ( ) {
ini . callSubscriber ( )
}
// Langgan maklumat dengan menukar kepada huruf besar
callSubscriber ( ) {
pubsub. melanggan ( 'Menerbitkan' , ( maklumat ) => {
ini . maklumat = maklumat. toUpperCase ( ) ;
} ) ,
// Langgan maklumat dengan menukar kepada huruf kecil
pubsub. melanggan ( 'Menerbitkan' , ( maklumat2 ) => {
ini . maklumat2 = maklumat2. kepadaLowerCase ( ) ;
} )
}
Ia sepatutnya kelihatan seperti ini:
subscribe.html
Kami memaparkan teks dalam huruf besar (disimpan dalam maklumat) dan huruf kecil (disimpan dalam maklumat2).
< div kelas = 'slds-p-around_medium' >
Maklumat diterima dalam huruf besar - < b > {maklumat} < / b >< br >
Maklumat diterima dalam huruf kecil - < b > {maklumat2} < / b >
< / div >
< / kad kilat>
< / templat>
Pengeluaran:
Tambahkan dua komponen ini pada halaman anda. Pastikan kedua-dua komponen berada pada halaman yang sama. Jika tidak, fungsi itu tidak akan berfungsi.
Mari masukkan beberapa teks dalam komponen 'Terbitkan' dan klik butang 'Hantar Data'. Kita dapat melihat bahawa teks diterima dalam huruf besar dan huruf kecil.
Kesimpulan
Kini, kami dapat berkomunikasi dengan komponen LWC melalui konsep acara dalam Salesforce LWC. Sebagai sebahagian daripada panduan ini, kami belajar cara berkomunikasi daripada Ibu Bapa kepada Anak dan daripada Anak kepada Ibu Bapa. Model PubSub digunakan sekiranya komponen anda tidak berkaitan antara satu sama lain (bukan Ibu Bapa – Anak). Setiap senario diterangkan dengan contoh mudah dan pastikan anda memasukkan kod yang disediakan pada permulaan panduan ini dalam fail 'meta-xml'.