LWC'deki olaylar bileşenlerle iletişim kurmak için kullanılır. İlgili bileşenler varsa Ebeveyn'den Çocuğa veya Çocuk'tan Ebeveyne iletişim mümkün olabilir. Birbiriyle ilgisiz iki bileşen varsa PubSub (Yayınla-Abone Ol) modeli üzerinden veya Yıldırım Mesaj Servisi (LMS) ile iletişim kurabiliyoruz. Bu kılavuzda PubSub modelini kullanarak Ebeveyn'den Çocuğa, Çocuk'tan Ebeveyne ve birbiriyle ilişkili bileşenlerle olaylarla nasıl iletişim kuracağımızı tartışacağız.
Bileşenleri Kayıt Sayfanıza, Uygulama Sayfanıza veya Ana Sayfanıza yerleştirebilirsiniz. Bu dosyayı (meta-xml) örnek kod parçacıkları altında tekrar belirtmeyeceğiz:
xml sürümü = '1.0' ?>
< LightningComponentBundle xmlns = 'http://soap.sforce.com/2006/04/metadata' >
< APIVersiyonu > 57.0 APIVersiyonu >
< açığa çıktı > doğru açığa çıktı >
< hedefler >
< hedef > yıldırım__Kayıt Sayfası hedef >
< hedef > yıldırım__Uygulama Sayfası hedef >
< hedef > yıldırım__Anasayfa hedef >
hedefler >
Yıldırım Bileşeni Paketi >
Ebeveyn-Çocuk İletişimi
İki bileşenin birbiriyle ilişkili olması durumunda bu iletişim mümkündür. Burada Ebeveyn verileri Çocuğa gönderir. Ana bileşen Çocuk bileşenini tutar. Bu yaklaşımla, İlkel verileri (Tamsayı, String, Boolean, vb.) Ebeveyn'den Çocuğa aktarabiliriz, İlkel Olmayan verileri (Dizi, Nesne, Nesne Dizisi vb.) Ebeveyn'den Çocuğa geçirerek verileri çocuğa aktarabiliriz. Ebeveyn üzerindeki eylemi içeren Çocuk bileşeni.
Ebeveyn'i Çocuğa iletmek için Çocuk bileşeninde bulunan alanları, özellikleri ve yöntemleri herkese açık olarak görünür hale getirmemiz gerekir. Bu da alanları, özellikleri ve yöntemleri “api” dekoratörü ile dekore ederek mümkün olabilir.
Örnek : Child bileşenin “js” dosyasında “api” ile bir değişken tanımlayın.
@ API değişkeni ;
Artık Parent bileşeni, HTML nitelikleri aracılığıyla HTML dosyasındaki Child bileşenini kullanıyor.
Örnek : Ana HTML dosyasındaki değişkeni kullanın.
< C - çocuk - kompozisyon değişkeni > C - çocuk - kompozisyon >
Ebeveyn-Çocuğa nasıl iletişim kurulacağını açıklayan bazı örnekleri tartışalım.
Örnek 1:
Bu temel örnek, Ebeveyn tarafından Çocuğa gönderilen bir bilginin alınmasını gösterir.
childtComp.js
Öncelikle halka açık olan “bilgi” değişkenini tutan bir Çocuk bileşeni oluşturuyoruz.
// API Dekoratörünü kullanarak değişkeni public olarak bildirin@ API bilgisi
“Js” kodunun tamamını aşağıdaki ekran görüntüsünde görebilirsiniz:
childtComp.html
Şimdi bu değişkeni HTML dosyasında center etiketi içerisinde belirtiyoruz.
< şablon >< yıldırım - kart başlığı = 'Çocuk' >
< merkez >
< B > { bilgi } B >
merkez >
yıldırım - kart >
şablon >
parentComp.js
“js” dosyasında hiçbir şey yapmıyoruz.
ebeveynComp.html
Genel değişkeni (bilgi) bir metinle birlikte ileterek önceki Çocuk bileşenini Ana HTML'nize yerleştirin.
< şablon >< yıldırım - kart başlığı = 'Ebeveyn' simge - isim = 'standart:hesap' >
< C - çocuk - kompozisyon
bilgi = 'Merhaba, bilgi aldım...'
> C - çocuk - kompozisyon >
yıldırım - kart >
şablon >
Çıktı:
Şimdi Salesforce Kuruluşunuza gidin ve Ana bileşeni 'Kayıt' sayfasına yerleştirin. Çocuk bileşeninin bilgiyi Ebeveyn'den aldığını göreceksiniz.
Örnek 2:
Parent bileşeninde kullanıcı arayüzünden dinamik olarak metni kabul edecek iki giriş metin alanı oluşturalım. Parent bileşenine ilk metni eklersek alt bileşen bu metni büyük harf olarak alır. Benzer şekilde ikinci metni eklediğimizde metni küçük harf olarak alır.
childtComp.js
Bir parça dekoratörüyle iki değişken (bilgi1 ve bilgi2) oluşturun.
- İlk giriş metnini büyük harfe dönüştüren “api” dekoratörüyle ConvertToUpper() yöntemini oluşturun.
- İkinci giriş metnini küçük harfe dönüştüren “api” dekoratörüyle ConvertToLower() yöntemini oluşturun.
@ parça bilgisi2 ;
@ API
ConvertToUpper ( gerçekBilgi1 ) {
Bu . Bilgi1 = gerçekBilgi1. toBüyük Harf ( ) ;
}
@ API
ConvertToLower ( gerçekBilgi1 ) {
Bu . Bilgi2 = gerçekBilgi1. toKüçük Harf ( ) ;
}
“Js” kodunun tamamı aşağıdakine benzer:
childtComp.html
“js” dosyasından gelen değerleri (Bilgi1 ve Bilgi2) görüntülüyoruz.
< şablon >< yıldırım - kart başlığı = 'Çocuk' >
Büyük Harf :& nbsp ; < B > { Bilgi1 } B >< br >
Küçük Harf :& nbsp ; < B > { Bilgi2 } B >
yıldırım - kart >
şablon >
parentComp.js
querySelector() aracılığıyla alt HTML şablonunu seçen iki işleyici yöntemi oluşturuyoruz. Metni büyük veya küçük harfe dönüştüren doğru yöntemleri aktarmanız gerektiğinden emin olun.
tanıtıcıEvent1 ( etkinlik ) {Bu . şablon . sorguSeçici ( 'c-çocuk-comp' ) . ConvertToUpper ( etkinlik. hedef . değer ) ;
}
tanıtıcıEvent2 ( etkinlik ) {
Bu . şablon . sorguSeçici ( 'c-çocuk-comp' ) . ConvertToLower ( etkinlik. hedef . değer ) ;
}
“Js” kodunun tamamı aşağıdakine benzer:
ebeveynComp.html
Her ikisi için de tanıtıcı olayları içeren bir giriş metni oluşturun. Çocuk bileşenini bu Ana bileşene yerleştirin.
< şablon >< yıldırım - kart başlığı = 'Ebeveyn' >
< merkez >
< yıldırım - giriş etiketi = 'Metni küçük harfle girin' değişiklik = { tanıtıcıEvent1 } > yıldırım - giriş >
merkez >
< br >< br >
< merkez >
< yıldırım - giriş etiketi = 'Metni büyük harfle girin' değişiklik = { tanıtıcıEvent2 } > yıldırım - giriş >
merkez >
< br >< br >< br >
< C - çocuk - kompozisyon > C - çocuk - kompozisyon >
yıldırım - kart >
şablon >
Çıktı:
Şimdi Salesforce Kuruluşunuza gidin ve Ana bileşeni 'Kayıt' sayfasına yerleştirin.
Kullanıcı arayüzünde iki metin girişi göreceksiniz.
İlk girişe bir miktar metin yazalım ve Child bileşeninde metnin büyük harfe dönüştürüldüğünü ve görüntülendiğini göreceksiniz.
İkinci girişe bir miktar metin yazın; metnin küçük harfe dönüştürüldüğünü ve Child bileşeninde görüntülendiğini göreceksiniz.
Çocuktan Ebeveyne İletişim
Önceki iletişime benzer şekilde, Çocuğu Ebeveyne iletmek için her iki bileşenin de birbiriyle ilişkili olması gerekir. Çocuğu Ebeveynle üç farklı yaklaşımla iletişim kurabiliriz: basit bir olay kullanarak Ebeveyni Çocuğa çağırmak ve veri ve olay köpüren bir olay kullanarak Ebeveyni Çocuğa çağırmak. Bu rehberimizde basit olaya bakacağız.
Çocuğu Ebeveyne iletmek için olayları oluşturup göndermemiz gerekiyor. Bunun için özel bir etkinliğin oluşturulması gerekir. Özel etkinlik, sizin tarafınızdan oluşturulan bir etkinliktir. New anahtar sözcüğünü kullanarak bunu oluşturabiliriz. Event_Name herhangi bir şey olabilir (büyük harflerden veya rakamlardan başka bir dize olabilir). Şimdilik seçenekleri tartışmayacağız.
Sözdizimi : new CustomEvent('Olay_Adı',{seçenekler…})
Artık özel bir etkinliğiniz var. Bir sonraki adım olayı göndermektir. Event'i göndermek için EventTarget.dispatchEvent() metodunda oluşturduğumuz event'i belirtmemiz gerekiyor.
Sözdizimi : this.displatchEvent(new CustomEvent('Event_Name',{options…})
Son olarak olayı ele almamız gerekiyor. Şimdi Parent bileşeninizdeki alt bileşeni çağırmamız gerekiyor. Etkinlik adınıza 'açık' önekini belirterek etkinlik adınızı iletin. Bu, olay dinleyicisi işleyicisini alır.
Sözdizimi:
< C - çocuk - EtkinlikAdınız'daki bileşen = { dinleyiciİşleyici } > C - çocuk - bileşen >Örnek:
Bu örnekte bir Parent bileşeni (exampleParent) ve iki Child bileşeni oluşturuyoruz.
- İlk Child'da (exampleChild), kullanıcının bir miktar metin sağlamasına olanak tanıyan bir giriş metni oluşturuyoruz. Aynı metin Parent bileşeninde de büyük harflerle görüntülenir.
- İkinci Çocukta (child2), kullanıcının bir miktar metin sağlamasına olanak tanıyan bir giriş metni oluşturuyoruz. Aynı metin Parent bileşeninde de küçük harflerle görüntülenir.
örnekChild.js
Hedef değer olarak ayrıntıyla 'linuxhintevent1' CustomEvent'i oluşturan bir HandleChange1 yöntemi oluşturuyoruz. Daha sonra bu eventi gönderiyoruz. Aşağıdaki pasajı bu “js” dosyasına yerleştirin.
//olayın işlenmesitanıtıcıDeğişim1 ( etkinlik ) {
etkinlik. ÖnlemeVarsayılan ( ) ;
yapı isim1 = etkinlik. hedef . değer ;
yapı olay1'i seç = yeni ÖzelEtkinlik ( 'linuxhint olayı1' , {
detay : isim1
} ) ;
Bu . gönderim olayı ( olay1'i seç ) ;
}
örnekChild.html
“js”de oluşturulan önceki tanıtıcı yöntemi, HTML bileşenindeki yıldırım girişine göre işlenir.
< şablon >< yıldırım - kart başlığı = 'Çocuk 1' >
< div sınıf = 'slds-m-around_medium' >
< yıldırım - giriş etiketi = 'Metni küçük harfle girin' değişiklik = { tanıtıcıDeğişim1 } > yıldırım - giriş >
div >
yıldırım - kart >
şablon >
çocuk2.js
Hedef değer olarak ayrıntıyla “linuxhintevent2” CustomEvent'i oluşturan bir HandleChange2 yöntemi oluşturuyoruz. Daha sonra bu eventi gönderiyoruz.
tanıtıcıDeğiştir2 ( etkinlik ) {etkinlik. ÖnlemeVarsayılan ( ) ;
yapı isim2 = etkinlik. hedef . değer ;
yapı olay2 seç = yeni ÖzelEtkinlik ( 'linuxhintevent2' , {
detay : isim2
} ) ;
Bu . gönderim olayı ( olay2 seç ) ;
}
çocuk2.html
“js”de oluşturulan önceki tanıtıcı yöntemi, HTML bileşenindeki yıldırım girişine göre işlenir.
< şablon >< yıldırım - kart başlığı = 'Çocuk 2' >
< div sınıf = 'slds-m-around_medium' >
< yıldırım - giriş etiketi = 'Metni büyük harfle girin' değişiklik = { tanıtıcıDeğiştir2 } > yıldırım - giriş >
div >
yıldırım - kart >
şablon >
exampleParent.js: Bu pasajı sınıf içindeki “js” dosyanıza yerleştirin.
- handEvent1() işlevindeki toUpperCase() işlevini kullanarak girişi büyük harfe dönüştürün ve Information1 değişkeninde saklayın
- HandleEvent2() işlevindeki toLowerCase() işlevini kullanarak girişi küçük harfe dönüştürün ve Information2 değişkeninde saklayın.
// toUpperCase() fonksiyonunu kullanarak girişi büyük harfe dönüştürün
// tanıtıcıEvent1()'de ve Bilgi1 değişkeninde saklıyoruz
tanıtıcıEvent1(olay) {
const girdi1 = olay.detay;
this.Information1 = input1.toUpperCase();
}
@track Bilgisi2;
// toLowerCase() fonksiyonunu kullanarak girişi küçük harfe dönüştürün
// tanıtıcıEvent2()'de ve Bilgi2 değişkeninde saklıyoruz
tanıtıcıEvent2(olay) {
const girdi2 = olay.detay;
this.Information2 = input2.toLowerCase();
}
örnekParent.html
Şimdi, her iki Alt bileşeni de belirterek, iki değişkeni (Bilgi1 ve Bilgi2) Ana HTML bileşeninde görüntüleyin.
<şablon>< div sınıf = 'slds-m-around_medium' >
Çocuk-1 Mesajı Büyük Harf : < B > {Bilgi1} < / B >< br >
Çocuk-2 Küçük Harfli Mesaj : < B > {Bilgi2} < / B >< br >
< / B >< br >
< / div >
< / yıldırım kartı>
< / şablon>
Çıktı:
Şimdi Salesforce Kuruluşunuza gidin ve Ana bileşeni 'Kayıt' sayfasına yerleştirin.
Ebeveyn'de iki Çocuk bileşeninin bulunduğunu görebilirsiniz.
Child 1 bileşeninin altındaki giriş metnine bir miktar metin yazalım. Parent bileşeninde metnimizin büyük harfle görüntülendiğini görebiliriz.
Çocuk 2 bileşeninin altındaki giriş metnine biraz metin verin. Parent bileşeninde metnimizin küçük harflerle görüntülendiğini görebiliriz.
Aynı anda her iki metni de girmek mümkün olabilir.
PubSub Modeli
Birbirinden bağımsız (birbiriyle ilişkisi olmayan) bileşenlerle çalıştığınızda ve bir bileşenden diğerine bilgi göndermek istiyorsanız bu modeli kullanabilirsiniz. PubSub, Yayınla ve Abone Ol anlamına gelir. Verileri gönderen bileşen Yayıncı, verileri alan bileşen ise Abone olarak bilinir. Bileşenler arasında olayların gönderilmesi için pubsub modülünün kullanılması gerekmektedir. Zaten Salesforce tarafından önceden tanımlanmış ve verilmiştir. Dosya adı pubsub'dur. Bir LWC bileşeni oluşturup bu kodu “pubsub.js” olan javascript dosyanıza yazmanız gerekiyor.
Örnek:
İki bileşen oluşturalım: Yayınla ve Abone Ol.
Publish'de kullanıcıların bir giriş metni oluşturmasına izin veriyoruz. Buton tıklandığında Abone Ol bileşeninde veriler büyük ve küçük harflerle alınır.
yayınlama.js
Bu kodu JSON dosyanıza ekleyin. Burada bilgiyi alıyoruz ve bilgiyi yayınlıyoruz.
Bilgi değişkeni büyük harf, bilgi1 ise küçük harf olacaktır. Kodun başlangıcına bu içe aktarma ifadesini eklediğinizden emin olun – pubsub'u 'c/pubsub'dan içe aktarın.
bilgibilgi2
// Bilgileri büyük ve küçük harflerle alın
bilgi işleyicisi ( etkinlik ) {
Bu . bilgi = etkinlik. hedef . değer ;
Bu . bilgi2 = etkinlik. hedef . değer ;
}
// Her iki bilgiyi de yayınlayın (Büyük harf ve küçük harf)
yayınlama İşleyicisi ( ) {
pubsub. Yayınla ( 'Yayınla' , Bu . bilgi )
pubsub. Yayınla ( 'Yayınla' , Bu . bilgi2 )
}
Şunun gibi görünmeli:
yayınlama.html
İlk olarak, işleyici bilgileriyle metni kabul etmek için yıldırım girişini oluşturuyoruz. Bundan sonra onclick işlevine sahip bir düğme oluşturulur. Bu işlevler önceki “js” kod parçacığında yer almaktadır.
<şablon>< / yıldırım kartı>
< / şablon>
abone ol.js
Bu kodu JSON dosyanıza ekleyin. Burada öncelikle bilgiyi callSubscriber() metodu içerisinde ayrı ayrı büyük ve küçük harfe çevirerek abone oluyoruz. Daha sonra bu metodu Connectedcallback() metodu ile çağırıyoruz. Kodun başlangıcına bu içe aktarma ifadesini eklediğinizden emin olun – pubsub'u 'c/pubsub'dan içe aktarın.
bilgibilgi2
// callSubscriber()'ı çağırıyoruz
bağlıGeri arama ( ) {
Bu . aboneyi ara ( )
}
// Bilgileri büyük harfe çevirerek abone olun
aboneyi ara ( ) {
pubsub. abone ( 'Yayınla' , ( bilgi ) => {
Bu . bilgi = bilgi. toBüyük Harf ( ) ;
} ) ,
// Bilgileri küçük harfe dönüştürerek abone olun
pubsub. abone ( 'Yayınla' , ( bilgi2 ) => {
Bu . bilgi2 = bilgi2. toKüçük Harf ( ) ;
} )
}
Şunun gibi görünmeli:
abone.html
Metni büyük harfle (bilgide saklanan) ve küçük harfle (bilgi2'de saklanan) görüntüleriz.
<şablon>< div sınıf = 'slds-p-around_medium' >
Büyük harfle alınan bilgiler - < B > {bilgi} < / B >< br >
Küçük harflerle alınan bilgiler - < B > {bilgi2} < / B >
< / div >
< / yıldırım kartı>
< / şablon>
Çıktı:
Bu iki bileşeni sayfanıza ekleyin. Her iki bileşenin de aynı sayfada olduğundan emin olun. Aksi takdirde işlevsellik çalışmaz.
“Yayınla” bileşenine bir miktar metin girelim ve “Veri Gönder” butonuna tıklayalım. Metnin büyük ve küçük harf olarak alındığını görebiliriz.
Çözüm
Artık Salesforce LWC'deki etkinlik konsepti aracılığıyla LWC bileşenleriyle iletişim kurabiliyoruz. Bu kılavuzun bir parçası olarak Ebeveyn'den Çocuğa ve Çocuk'tan Ebeveyne nasıl iletişim kuracağımızı öğrendik. Bileşenlerinizin birbiriyle ilişkili olmaması (Ebeveyn – Çocuk değil) durumunda PubSub modeli kullanılır. Her senaryo basit bir örnekle açıklanmaktadır ve bu kılavuzun başında verilen kodu “meta-xml” dosyasına eklediğinizden emin olun.