Acara di LWC digunakan untuk berkomunikasi dengan komponen. Jika ada komponen-komponen yang terkait, maka dimungkinkan untuk berkomunikasi dari Parent to Child atau Child to Parent. Jika ada dua komponen yang tidak berhubungan, kita dapat berkomunikasi melalui model PubSub (Publish-Subscribe) atau dengan Lightning Message Service (LMS). Dalam panduan ini, kita akan membahas cara mengkomunikasikan peristiwa dari Parent ke Child, Child ke Parent, dan komponen yang saling terkait menggunakan model PubSub.
Anda dapat menempatkan komponen di Halaman Rekaman, Halaman Aplikasi, atau Halaman Beranda. Kami tidak akan menentukan file ini (meta-xml) lagi di bawah cuplikan kode contoh:
versi xml = '1.0' ?>
< LightningComponentBundle xmlns = 'http://soap.sforce.com/2006/04/metadata' >
< versi api > 57.0 versi api >
< Terkena > BENAR Terkena >
< target >
< target > Lightning__Halaman Catatan target >
< target > Lightning__Halaman Aplikasi target >
< target > petir__Halaman Beranda target >
target >
Paket Komponen Lightning >
Komunikasi Orang Tua ke Anak
Jika dua komponen saling berhubungan, komunikasi ini dimungkinkan. Di sini, Orang Tua mengirimkan datanya kepada Anak. Komponen induk menampung komponen Anak. Dengan pendekatan ini, kita dapat meneruskan data Primitif (Integer, String, Boolean, dll) dari Parent ke Child, meneruskan data Non-Primitive (Array, Object, Array of Objects, dll) dari Parent ke Child, meneruskan data ke komponen Anak dengan tindakan pada Induk.
Untuk mengkomunikasikan Induk ke Anak, kita perlu membuat bidang, properti, dan metode yang tersedia di komponen Anak dapat dilihat oleh publik. Hal ini dapat dilakukan dengan mendekorasi bidang, properti, dan metode dengan dekorator “api”.
Contoh : Deklarasikan variabel dengan “api” di file komponen Anak “js”.
@ variabel api ;
Sekarang, komponen Induk menggunakan komponen Anak dalam file HTML melalui atribut HTML.
Contoh : Gunakan variabel dalam file HTML Induk.
< C - anak - variabel komp > C - anak - komp >
Mari kita bahas beberapa contoh yang menggambarkan cara berkomunikasi Orang Tua ke Anak.
Contoh 1:
Contoh dasar ini menunjukkan cara mendapatkan informasi yang dikirimkan oleh Orang Tua kepada Anak.
anaktComp.js
Pertama, kita membuat komponen Anak yang menyimpan variabel “informasi” yang tersedia untuk umum.
// Deklarasikan variabel sebagai publik menggunakan api Dekorator@ informasi api
Anda dapat melihat seluruh kode “js” di tangkapan layar berikut:
anaktComp.html
Sekarang, kita tentukan variabel ini dalam file HTML di dalam tag tengah.
< templat >< petir - judul kartu = 'Anak' >
< tengah >
< B > { informasi } B >
tengah >
petir - kartu >
templat >
indukComp.js
Kami tidak melakukan apa pun di file 'js'.
parentComp.html
Tempatkan komponen Anak sebelumnya di HTML Induk Anda dengan meneruskan variabel publik (informasi) dengan beberapa teks.
< templat >< petir - judul kartu = 'Induk' ikon - nama = 'standar: akun' >
< C - anak - komp
informasi = 'Halo, saya menerima informasi...'
> C - anak - komp >
petir - kartu >
templat >
Keluaran:
Sekarang, buka Organisasi Salesforce Anda dan tempatkan komponen Induk di halaman “Catatan”. Anda akan melihat bahwa komponen Anak menerima informasi dari Induk.
Contoh 2:
Mari buat dua kolom teks masukan yang akan menerima teks secara dinamis dari UI di komponen Induk. Jika kita memasukkan teks pertama ke dalam komponen Induk, komponen anak menerima teks ini dalam huruf besar. Demikian pula, ia menerima teks dalam huruf kecil jika kita menyisipkan teks kedua.
anaktComp.js
Buat dua variabel – informasi1 dan informasi2 – dengan dekorator trek.
- Buat metode convertToUpper() dengan dekorator “api” yang mengubah teks masukan pertama menjadi huruf besar.
- Buat metode convertToLower() dengan dekorator “api” yang mengubah teks masukan kedua menjadi huruf kecil.
@ melacak Informasi2 ;
@ api
convertToUpper ( Info aktual1 ) {
ini . Informasi1 = Info aktual1. ke UpperCase ( ) ;
}
@ api
convertToLower ( Info aktual1 ) {
ini . Informasi2 = Info aktual1. ke Huruf Kecil ( ) ;
}
Keseluruhan kode “js” terlihat seperti berikut:
anaktComp.html
Kami menampilkan nilai (Informasi1 dan Informasi2) yang berasal dari file “js”.
< templat >< petir - judul kartu = 'Anak' >
Huruf besar :& nbsp ; < B > { Informasi1 } B < saudara >
Huruf Kecil :& nbsp ; < B > { Informasi2 } B >
petir - kartu >
templat >
indukComp.js
Kami membuat dua metode penangan yang memilih templat HTML anak melalui querySelector(). Pastikan Anda menggunakan metode yang benar untuk mengubah teks menjadi huruf besar atau kecil.
menanganiEvent1 ( peristiwa ) {ini . templat . querySelector ( 'c-anak-perusahaan' ) . convertToUpper ( peristiwa. target . nilai ) ;
}
menanganiEvent2 ( peristiwa ) {
ini . templat . querySelector ( 'c-anak-perusahaan' ) . convertToLower ( peristiwa. target . nilai ) ;
}
Keseluruhan kode “js” terlihat seperti berikut:
parentComp.html
Buat teks masukan dengan menangani acara untuk keduanya. Tempatkan komponen Anak di komponen Induk ini.
< templat >< petir - judul kartu = 'Induk' >
< tengah >
< petir - label masukan = 'Masukkan teks dalam huruf kecil' dalam perubahan = { menanganiEvent1 } > petir - memasukkan >
tengah >
< saudara < saudara >
< tengah >
< petir - label masukan = 'Masukkan teks dalam huruf besar' dalam perubahan = { menanganiEvent2 } > petir - memasukkan >
tengah >
< saudara < saudara < saudara >
< C - anak - komp > C - anak - komp >
petir - kartu >
templat >
Keluaran:
Sekarang, buka Organisasi Salesforce Anda dan tempatkan komponen Induk di halaman “Catatan”.
Anda akan melihat dua input teks di UI.
Mari kita tulis beberapa teks pada input pertama dan Anda akan melihat bahwa teks tersebut diubah menjadi huruf besar dan ditampilkan di komponen Anak.
Tulis beberapa teks pada input kedua dan Anda akan melihat bahwa teks tersebut diubah menjadi huruf kecil dan ditampilkan di komponen Anak.
Komunikasi Anak ke Orang Tua
Sama halnya dengan komunikasi sebelumnya, untuk mengkomunikasikan Anak kepada Orang Tua, kedua komponen harus saling berhubungan. Kita dapat mengomunikasikan Anak ke Orang Tua dalam tiga pendekatan berbeda: memanggil Orang Tua ke Anak menggunakan peristiwa sederhana dan memanggil Orang Tua ke Anak menggunakan peristiwa dengan data dan peristiwa menggelegak. Kami akan melihat acara sederhana dalam panduan ini.
Untuk mengkomunikasikan Anak kepada Orang Tua, kita perlu membuat dan mengirimkan peristiwa. Untuk itu, acara khusus harus dibuat. Acara khusus adalah acara yang dibuat sendiri. Kita bisa membuatnya menggunakan kata kunci baru. Event_Name bisa berupa apa saja (bisa berupa string, tidak melebihi huruf besar, atau angka). Untuk saat ini, kami tidak akan membahas opsinya.
Sintaksis : Acara Khusus baru('Nama_Acara',{pilihan…})
Sekarang, Anda memiliki acara khusus. Langkah selanjutnya adalah mengirimkan acara tersebut. Untuk mengirimkan acara, kita perlu menentukan acara yang kita buat dalam metode EventTarget.dispatchEvent().
Sintaksis : this.displatchEvent(new CustomEvent('Event_Name',{options…})
Terakhir, kita perlu menangani acara tersebut. Sekarang, kita harus memanggil komponen anak di komponen Induk Anda. Berikan nama acara Anda dengan menentukan awalan “on” pada nama acara Anda. Ini membutuhkan pengendali pendengar acara.
Sintaksis:
< C - anak - komponen padaNamaAcaraAnda = { pendengarHandler } > C - anak - komponen >Contoh:
Dalam contoh ini, kita membuat satu komponen Induk (exampleParent) dan dua komponen Anak.
- Di Anak pertama (exampleChild), kami membuat teks masukan yang memungkinkan pengguna memberikan beberapa teks. Teks yang sama ditampilkan dalam komponen Induk dalam huruf besar.
- Di Anak kedua (anak2), kami membuat teks masukan yang memungkinkan pengguna memberikan beberapa teks. Teks yang sama ditampilkan dalam komponen Induk dalam huruf kecil.
contohAnak.js
Kami membuat metode handleChange1 yang membuat CustomEvent “linuxhintevent1” dengan detail sebagai nilai target. Setelah itu, kami mengirimkan acara ini. Sematkan cuplikan berikut di file 'js' ini.
// menangani acara tersebutmenanganiPerubahan1 ( peristiwa ) {
peristiwa. mencegahDefault ( ) ;
konstanta nama1 = peristiwa. target . nilai ;
konstanta pilih Acara1 = baru Acara Khusus ( 'linuxhintevent1' , {
detail : nama1
} ) ;
ini . pengirimanEvent ( pilih Acara1 ) ;
}
contohAnak.html
Metode penanganan sebelumnya yang dibuat di “js” ditangani berdasarkan input petir di komponen HTML.
< templat >< petir - judul kartu = 'Anak 1' >
< div kelas = 'slds-m-around_medium' >
< petir - memasukkan label = 'Masukkan Teks dalam huruf kecil' dalam perubahan = { menanganiPerubahan1 } > petir - memasukkan >
div >
petir - kartu >
templat >
anak2.js
Kami membuat metode handleChange2 yang membuat CustomEvent “linuxhintevent2” dengan detail sebagai nilai target. Setelah itu, kami mengirimkan acara ini.
menangani Perubahan2 ( peristiwa ) {peristiwa. mencegahDefault ( ) ;
konstanta nama2 = peristiwa. target . nilai ;
konstanta pilih Acara2 = baru Acara Khusus ( 'linuxhintevent2' , {
detail : nama2
} ) ;
ini . pengirimanEvent ( pilih Acara2 ) ;
}
anak2.html
Metode penanganan sebelumnya yang dibuat di “js” ditangani berdasarkan input petir di komponen HTML.
< templat >< petir - judul kartu = 'Anak 2' >
< div kelas = 'slds-m-around_medium' >
< petir - memasukkan label = 'Masukkan Teks dalam huruf besar' dalam perubahan = { menangani Perubahan2 } > petir - memasukkan >
div >
petir - kartu >
templat >
contohParent.js: Sematkan cuplikan ini di file “js” Anda di dalam kelas.
- Ubah input menjadi huruf besar menggunakan fungsi toUpperCase() di handleEvent1() dan simpan di variabel Information1
- Ubah input menjadi huruf kecil menggunakan fungsi toLowerCase() di handleEvent2() dan simpan di variabel Information2.
// Ubah input menjadi huruf besar menggunakan fungsi toUpperCase()
// di handleEvent1() dan simpan di variabel Information1
handleEvent1(acara) {
const input1 = acara.detail;
this.Informasi1 = input1.toUpperCase();
}
@track Informasi2;
// Ubah input menjadi huruf kecil menggunakan fungsi toLowerCase()
// di handleEvent2() dan simpan di variabel Information2
handleEvent2(acara) {
const input2 = acara.detail;
ini.Informasi2 = input2.toLowerCase();
}
contohOrangtua.html
Sekarang, tampilkan dua variabel (Informasi1 & Informasi2) di komponen HTML Induk dengan menentukan kedua komponen Anak.
< div kelas = 'slds-m-around_medium' >
Pesan Anak-1 dalam Huruf Besar : < B > {Informasi1} < / B < saudara >
Pesan Anak-2 dalam Huruf Kecil : < B > {Informasi2} < / B < saudara >
< / B < saudara >
< / div >
< / kartu petir>
< / templat>
Keluaran:
Sekarang, buka Organisasi Salesforce Anda dan tempatkan komponen Induk di halaman “Catatan”.
Anda dapat melihat bahwa ada dua komponen Anak di Induk.
Mari kita ketikkan beberapa teks pada teks masukan di bawah komponen Anak 1. Kita dapat melihat bahwa teks kita ditampilkan dalam huruf besar pada komponen Induk.
Berikan beberapa teks pada teks masukan di bawah komponen Anak 2. Kita dapat melihat bahwa teks kita ditampilkan dalam huruf kecil pada komponen Induk.
Dimungkinkan juga untuk memasukkan kedua teks sekaligus.
Model PubSub
Saat Anda bekerja dengan komponen independen (tidak terkait satu sama lain) dan jika Anda ingin mengirimkan informasi dari satu komponen ke komponen lainnya, Anda dapat menggunakan model ini. PubSub adalah singkatan dari Publikasikan dan Berlangganan. Komponen yang mengirimkan data disebut Publisher dan komponen yang menerima data disebut Subscriber. Diperlukan untuk menggunakan modul pubsub untuk mengirim peristiwa antar komponen. Ini sudah ditentukan sebelumnya dan diberikan oleh Salesforce. Nama filenya adalah pubsub. Anda harus membuat komponen LWC dan mengetikkan kode ini di file javascript Anda yaitu “pubsub.js”.
Contoh:
Mari buat dua komponen – Publikasikan dan Berlangganan.
Di Publikasikan, kami mengizinkan pengguna untuk membuat teks masukan. Dengan mengklik tombol, data diterima dalam huruf besar dan huruf kecil di komponen Berlangganan.
terbitkan.js
Sematkan kode ini di file JSON Anda. Di sini, kami mendapatkan informasi dan mempublikasikan informasi tersebut.
Variabel informasi akan menjadi huruf besar dan informasi1 akan menjadi huruf kecil. Pastikan Anda menyertakan pernyataan import ini di awal kode – import pubsub from 'c/pubsub'.
informasiinformasi2
// Dapatkan Informasi dalam huruf besar dan kecil
penangan informasi ( peristiwa ) {
ini . informasi = peristiwa. target . nilai ;
ini . informasi2 = peristiwa. target . nilai ;
}
// Publikasikan kedua informasi tersebut (Dalam huruf besar dan kecil)
terbitkanHandler ( ) {
pubsub. menerbitkan ( 'Menerbitkan' , ini . informasi )
pubsub. menerbitkan ( 'Menerbitkan' , ini . informasi2 )
}
Seharusnya terlihat seperti:
terbitkan.html
Pertama, kita membuat input petir untuk menerima teks dengan informasi pengendali. Setelah itu, satu tombol dibuat dengan fungsi onclick. Fungsi-fungsi ini ada pada cuplikan kode “js” sebelumnya.
jenis = 'teks' onkeyup = { penangan informasi } < / masukan petir>
< / kartu petir>
< / templat>
berlangganan.js
Sematkan kode ini di file JSON Anda. Di sini, pertama-tama kita berlangganan informasinya dengan mengubahnya menjadi huruf besar dan huruf kecil secara terpisah di dalam metode callSubscriber(). Setelah itu, kita memanggil metode ini melalui metode connectcallback(). Pastikan Anda menyertakan pernyataan import ini di awal kode – import pubsub from 'c/pubsub'.
informasiinformasi2
// memanggil callSubscriber()
terhubungPanggilan Balik ( ) {
ini . pelanggan panggilan ( )
}
// Berlangganan informasi dengan mengubahnya menjadi huruf besar
pelanggan panggilan ( ) {
pubsub. langganan ( 'Menerbitkan' , ( informasi ) => {
ini . informasi = informasi. ke UpperCase ( ) ;
} ) ,
// Berlangganan informasi dengan mengubahnya menjadi huruf kecil
pubsub. langganan ( 'Menerbitkan' , ( informasi2 ) => {
ini . informasi2 = informasi2. ke Huruf Kecil ( ) ;
} )
}
Seharusnya terlihat seperti ini:
berlangganan.html
Kami menampilkan teks dalam huruf besar (disimpan dalam informasi) dan huruf kecil (disimpan dalam informasi2).
< div kelas = 'slds-p-around_medium' >
Informasi diterima dalam huruf besar - < B > {informasi} < / B < saudara >
Informasi diterima dalam huruf kecil - < B > {informasi2} < / B >
< / div >
< / kartu petir>
< / templat>
Keluaran:
Tambahkan dua komponen ini ke halaman Anda. Pastikan kedua komponen berada di halaman yang sama. Jika tidak, fungsinya tidak akan berfungsi.
Mari masukkan beberapa teks ke dalam komponen “Terbitkan” dan klik tombol “Kirim Data”. Kita dapat melihat bahwa teks diterima dalam huruf besar dan kecil.
Kesimpulan
Kini kami dapat berkomunikasi dengan komponen LWC melalui konsep acara di Salesforce LWC. Sebagai bagian dari panduan ini, kita belajar bagaimana berkomunikasi dari Orang Tua ke Anak dan dari Anak ke Orang Tua. Model PubSub digunakan jika komponen Anda tidak terkait satu sama lain (bukan Induk – Anak). Setiap skenario dijelaskan dengan contoh sederhana dan pastikan Anda menyertakan kode yang disediakan di awal panduan ini dalam file “meta-xml”.