אירועים ב-LWC משמשים לתקשורת עם הרכיבים. אם יש רכיבים קשורים, אפשר לתקשר מהורה לילד או מילד להורה. אם יש שני רכיבים לא קשורים, נוכל לתקשר באמצעות מודל PubSub (פרסום-הירשם) או עם שירות ההודעות של Lightning (LMS). במדריך זה, נדון כיצד לתקשר עם אירועים מהורה לילד, מילד להורה ורכיבים הקשורים זה בזה באמצעות מודל PubSub.
אתה יכול למקם את הרכיבים בדף ההקלטה, בדף האפליקציה או בדף הבית שלך. לא נציין שוב את הקובץ הזה (meta-xml) תחת קטעי הקוד לדוגמה:
גרסת xml = '1.0' ?>
< LightningComponentBundle xmlns = 'http://soap.sforce.com/2006/04/metadata' >
< apiVersion > 57.0 apiVersion >
< חשוף > נָכוֹן חשוף >
< מטרות >
< יַעַד > lightning__RecordPage יַעַד >
< יַעַד > lightning__AppPage יַעַד >
< יַעַד > lightning__דף הבית יַעַד >
מטרות >
LightningComponentBundle >
תקשורת הורה לילד
אם שני מרכיבים קשורים זה לזה, תקשורת זו אפשרית. כאן, ההורה שולח את הנתונים לילד. רכיב האב מחזיק ברכיב Child. עם גישה זו, נוכל להעביר את הנתונים הפרימיטיביים (מספר שלם, מחרוזת, בוליאנית וכו') מהורה לילד, להעביר את הנתונים הלא-פרימיטיביים (מערך, אובייקט, מערך אובייקטים וכו') מהורה לילד, להעביר את הנתונים אל. רכיב הילד עם הפעולה על ההורה.
על מנת לתקשר בין ההורה לילד, עלינו להפוך את השדות, המאפיינים והשיטות הזמינים ברכיב הילד לגלויים לציבור. זה יכול להיות אפשרי על ידי עיטור השדות, המאפיינים והשיטות עם הדקורטור 'אפי'.
דוגמא : הכריז על משתנה עם 'api' בקובץ 'js' של רכיב Child.
@ משתנה API ;
כעת, רכיב האב משתמש ברכיב Child בקובץ ה-HTML באמצעות תכונות ה-HTML.
דוגמא : השתמש במשתנה בקובץ HTML האב.
< ג - יֶלֶד - משתנה comp > ג - יֶלֶד - comp >
בואו נדון בכמה דוגמאות שמתארות כיצד לתקשר עם הורה לילד.
דוגמה 1:
דוגמה בסיסית זו מדגימה קבלת מידע שנשלח על ידי ההורה לילד.
childtComp.js
ראשית, אנו יוצרים רכיב Child שמכיל את המשתנה 'מידע' הזמין לציבור.
// הכריז על המשתנה כציבורי באמצעות ה-API Decorator@ מידע API
אתה יכול לראות את כל קוד 'js' בצילום המסך הבא:
childtComp.html
כעת, אנו מציינים את המשתנה הזה בקובץ ה-HTML בתוך התג המרכזי.
< תבנית >< בָּרָק - כותרת הכרטיס = 'יֶלֶד' >
< מֶרְכָּז >
< ב > { מֵידָע } ב >
מֶרְכָּז >
בָּרָק - כַּרְטִיס >
תבנית >
parentComp.js
אנחנו לא עושים שום דבר בקובץ 'js'.
parentComp.html
הצב את רכיב ה-Child הקודם ב-HTML האב שלך על ידי העברת המשתנה הציבורי (מידע) עם טקסט מסוים.
< תבנית >< בָּרָק - כותרת הכרטיס = 'הוֹרֶה' סמל - שֵׁם = 'רגיל:חשבון' >
< ג - childt - comp
מֵידָע = 'שלום, קיבלתי מידע...'
> ג - childt - comp >
בָּרָק - כַּרְטִיס >
תבנית >
תְפוּקָה:
כעת, עבור לארגון Salesforce שלך והצב את רכיב האב בדף 'הקלט'. תראה שרכיב הילד קיבל את המידע מההורה.
דוגמה 2:
בואו ניצור שני שדות טקסט קלט שיקבלו את הטקסט באופן דינמי ממשק המשתמש ברכיב האב. אם נכניס את הטקסט הראשון ברכיב Parent, רכיב הילד יקבל את הטקסט הזה באותיות רישיות. באופן דומה, הוא מקבל את הטקסט באותיות קטנות אם נכניס את הטקסט השני.
childtComp.js
צור שני משתנים - מידע1 ומידע2 - עם מעצב מסלול.
- צור את שיטת convertToUpper() עם הדקורטור 'api' שממיר את טקסט הקלט הראשון לאותיות רישיות.
- צור את שיטת convertToLower() עם הדקורטור 'api' שממיר את טקסט הקלט השני לאותיות קטנות.
@ מסלול מידע2 ;
@ API
convertToUpper ( ממש מידע 1 ) {
זֶה . מידע 1 = ממש מידע 1. toUpperCase ( ) ;
}
@ API
convertToLower ( ממש מידע 1 ) {
זֶה . מידע 2 = ממש מידע 1. toLowerCase ( ) ;
}
כל הקוד 'js' נראה כך:
childtComp.html
אנו מציגים את הערכים (Information1 ו-Information2) המגיעים מקובץ 'js'.
< תבנית >< בָּרָק - כותרת הכרטיס = 'יֶלֶד' >
אוֹתִיוֹת גְדוֹלוֹת :& הערה: ; < ב > { מידע 1 } ב >< br >
אוֹתִיוֹת קְטָנוֹת :& הערה: ; < ב > { מידע 2 } ב >
בָּרָק - כַּרְטִיס >
תבנית >
parentComp.js
אנו יוצרים שתי שיטות מטפל שבוחרות את תבנית ה-HTML הבת דרך ה-querySelector(). ודא שאתה צריך להעביר את השיטות הנכונות הממירות את הטקסט לאותיות גדולות או קטנות.
handleEvent1 ( מִקרֶה ) {זֶה . תבנית . querySelector ( 'c-childt-comp' ) . convertToUpper ( מִקרֶה. יַעַד . ערך ) ;
}
handleEvent2 ( מִקרֶה ) {
זֶה . תבנית . querySelector ( 'c-childt-comp' ) . convertToLower ( מִקרֶה. יַעַד . ערך ) ;
}
כל הקוד 'js' נראה כך:
parentComp.html
צור טקסט קלט עם אירועי טיפול עבור שניהם. מקם את רכיב ה-Child ברכיב הורה זה.
< תבנית >< בָּרָק - כותרת הכרטיס = 'הוֹרֶה' >
< מֶרְכָּז >
< בָּרָק - תווית קלט = 'הזן את הטקסט באותיות קטנות' בשינוי = { handleEvent1 } > בָּרָק - קֶלֶט >
מֶרְכָּז >
< br >< br >
< מֶרְכָּז >
< בָּרָק - תווית קלט = 'הזן את הטקסט באותיות רישיות' בשינוי = { handleEvent2 } > בָּרָק - קֶלֶט >
מֶרְכָּז >
< br >< br >< br >
< ג - childt - comp > ג - childt - comp >
בָּרָק - כַּרְטִיס >
תבנית >
תְפוּקָה:
כעת, עבור לארגון Salesforce שלך והצב את רכיב האב בדף 'הקלט'.
תראה שתי כניסות טקסט בממשק המשתמש.
בוא נכתוב קצת טקסט בקלט הראשון ותראה שהטקסט מומר לאותיות רישיות ומוצג ברכיב Child.
כתוב קצת טקסט בקלט השני ותראה שהטקסט מומר לאותיות קטנות ומוצג ברכיב Child.
תקשורת בין ילד להורה
בדומה לתקשורת הקודמת, כדי לתקשר את הילד להורה, שני המרכיבים צריכים להתייחס זה לזה. אנו יכולים לתקשר את הילד להורה בשלוש גישות שונות: קריאה להורה לילד באמצעות אירוע פשוט וקריאה להורה לילד באמצעות אירוע עם הנתונים והאירוע מבעבעים. נסתכל על האירוע הפשוט במדריך זה.
על מנת לתקשר את הילד להורה, עלינו ליצור ולשגר את האירועים. לשם כך, יש ליצור אירוע מותאם אישית. אירוע מותאם אישית הוא אירוע שנוצר בעצמך. נוכל ליצור אותו באמצעות מילת המפתח החדשה. ה-Event_Name יכול להיות כל דבר (הוא יכול להיות מחרוזת, לא מעבר לאותיות גדולות או ספרות). לעת עתה, לא נדון באפשרויות.
תחביר : new CustomEvent('Event_Name',{options…})
עכשיו, יש לך את האירוע המותאם אישית. השלב הבא הוא שליחת האירוע. כדי לשלוח את האירוע, עלינו לציין את האירוע שיצרנו בשיטת EventTarget.dispatchEvent() .
תחביר : this.displatchEvent(new CustomEvent('Event_Name',{options...})
לבסוף, אנחנו צריכים לטפל באירוע. כעת, עלינו לקרוא לרכיב הילד ברכיב ההורה שלך. העבר את שם האירוע שלך על ידי ציון הקידומת 'מופעל' לשם האירוע שלך. זה לוקח את המטפל מאזין האירועים.
תחביר:
< ג - יֶלֶד - רכיב onyourEventName = { מאזין הנדלר } > ג - יֶלֶד - רְכִיב >דוגמא:
בדוגמה זו, אנו יוצרים רכיב אב אחד (exampleParent) ושני רכיבי Child.
- ב-Child הראשון (exampleChild), אנו יוצרים טקסט קלט המאפשר למשתמש לספק טקסט כלשהו. אותו טקסט מוצג ברכיב האב באותיות רישיות.
- ב-Child השני (child2), אנו יוצרים טקסט קלט המאפשר למשתמש לספק טקסט כלשהו. אותו טקסט מוצג ברכיב האב באותיות קטנות.
exampleChild.js
אנו יוצרים שיטה handleChange1 שיוצרת את 'linuxhintevent1' CustomEvent עם הפירוט כערך היעד. לאחר מכן, אנו שולחים את האירוע הזה. הטמע את הקטע הבא בקובץ 'js' זה.
// לטפל באירועhandleChange1 ( מִקרֶה ) {
מִקרֶה. למנוע ברירת מחדל ( ) ;
const שם 1 = מִקרֶה. יַעַד . ערך ;
const בחרEvent1 = חָדָשׁ אירוע מותאם אישית ( 'linuxhintevent1' , {
פרט : שם 1
} ) ;
זֶה . dispatchEvent ( בחרEvent1 ) ;
}
exampleChild.html
שיטת ה-handle הקודמת שנוצרה ב-'js' מטופלת על סמך קלט ה-lightning ברכיב ה-HTML.
< תבנית >< בָּרָק - כותרת הכרטיס = 'ילד 1' >
< div מעמד = 'slds-m-around_medium' >
< בָּרָק - תווית קלט = 'הזן טקסט באותיות קטנות' בשינוי = { handleChange1 } > בָּרָק - קֶלֶט >
div >
בָּרָק - כַּרְטִיס >
תבנית >
child2.js
אנו יוצרים שיטת handleChange2 שיוצרת את ה-'linuxhintevent2' CustomEvent עם הפירוט כערך היעד. לאחר מכן, אנו שולחים את האירוע הזה.
handleChange2 ( מִקרֶה ) {מִקרֶה. למנוע ברירת מחדל ( ) ;
const שם2 = מִקרֶה. יַעַד . ערך ;
const בחרEvent2 = חָדָשׁ אירוע מותאם אישית ( 'linuxhintevent2' , {
פרט : שם2
} ) ;
זֶה . dispatchEvent ( בחרEvent2 ) ;
}
child2.html
שיטת ה-handle הקודמת שנוצרה ב-'js' מטופלת על סמך קלט ה-lightning ברכיב ה-HTML.
< תבנית >< בָּרָק - כותרת הכרטיס = 'ילד 2' >
< div מעמד = 'slds-m-around_medium' >
< בָּרָק - תווית קלט = 'הזן טקסט באותיות רישיות' בשינוי = { handleChange2 } > בָּרָק - קֶלֶט >
div >
בָּרָק - כַּרְטִיס >
תבנית >
exampleParent.js: הטמע את הקטע הזה בקובץ 'js' שלך בתוך הכיתה.
- המר את הקלט לאותיות רישיות באמצעות הפונקציה toUpperCase() ב-handleEvent1() ואחסן אותו במשתנה Information1
- המר את הקלט לאותיות קטנות באמצעות הפונקציה toLowerCase() ב-handleEvent2() ואחסן אותו במשתנה Information2.
// המר את הקלט לאותיות רישיות באמצעות הפונקציה toUpperCase()
// ב-handleEvent1() ואחסון במשתנה Information1
handleEvent1(event) {
const input1 = event.detail;
this.Information1 = input1.toUpperCase();
}
@track Information2;
// המר את הקלט לאותיות קטנות באמצעות הפונקציה toLowerCase()
// ב-handleEvent2() ואחסון במשתנה Information2
handleEvent2(event) {
const input2 = event.detail;
this.Information2 = input2.toLowerCase();
}
exampleParent.html
כעת, הצג את שני המשתנים (מידע1 ומידע2) ברכיב HTML אב על ידי ציון שני רכיבי ה-Child.
<תבנית><כרטיס ברק כותרת = 'הוֹרֶה' >
< div מעמד = 'slds-m-around_medium' >
הודעה ילד-1 באותיות רישיות: < ב > {מידע1} < / ב >< br >
הודעת ילד-2 באותיות קטנות: < ב > {מידע2} < / ב >< br >
< / ב >< br >
< / div >
< / ברק-כרטיס>
< / תבנית>
תְפוּקָה:
כעת, עבור לארגון Salesforce שלך והצב את רכיב האב בדף 'הקלט'.
אתה יכול לראות שקיימים שני מרכיבי ילד בהורה.
בוא נקליד קצת טקסט בטקסט הקלט תחת הרכיב Child 1. אנו יכולים לראות שהטקסט שלנו מוצג באותיות רישיות ברכיב האב.
תן קצת טקסט בטקסט הקלט תחת הרכיב Child 2. אנו יכולים לראות שהטקסט שלנו מוצג באותיות קטנות ברכיב האב.
אפשר גם להזין את שני הטקסטים בו-זמנית.
דגם PubSub
כאשר אתה עובד עם רכיבים עצמאיים (לא קשורים זה לזה) ואם אתה רוצה לשלוח את המידע מרכיב אחד למשנהו, אתה יכול להשתמש במודל זה. PubSub קיצור של Publish and Subscribe. הרכיב ששולח את הנתונים ידוע בשם Publisher והרכיב שמקבל את הנתונים ידוע בתור המנוי. יש צורך להשתמש במודול pubsub כדי לשלוח את האירועים בין הרכיבים. זה כבר מוגדר מראש וניתן על ידי Salesforce. שם הקובץ הוא pubsub. עליך ליצור רכיב LWC ולהקליד את הקוד הזה בקובץ ה-Javascript שלך שהוא 'pubsub.js'.
דוגמא:
בואו ניצור שני רכיבים - פרסם והירשם.
ב- Publish, אנו מאפשרים למשתמשים ליצור טקסט קלט. בלחיצה על הכפתור, הנתונים מתקבלים באותיות רישיות וקטנות ברכיב Subscribe.
publish.js
הטמע את הקוד הזה בקובץ ה-JSON שלך. כאן, אנו מקבלים את המידע ומפרסמים את המידע.
משתנה המידע יהיה באותיות רישיות והמידע1 יהיה באותיות קטנות. ודא שאתה כולל הצהרת ייבוא זו בתחילת הקוד - ייבוא pubsub מ- 'c/pubsub'.
מֵידָעמידע 2
// קבל את המידע באותיות גדולות וקטנות
מידע הנדלר ( מִקרֶה ) {
זֶה . מֵידָע = מִקרֶה. יַעַד . ערך ;
זֶה . מידע 2 = מִקרֶה. יַעַד . ערך ;
}
// פרסם גם את המידע (באותיות גדולות וגם באותיות קטנות)
publishHandler ( ) {
pubsub. לְפַרְסֵם ( 'לְפַרְסֵם' , זֶה . מֵידָע )
pubsub. לְפַרְסֵם ( 'לְפַרְסֵם' , זֶה . מידע 2 )
}
זה אמור להיראות כך:
publish.html
ראשית, אנו יוצרים את קלט הברק כדי לקבל את הטקסט עם מידע המטפל. לאחר מכן, נוצר כפתור אחד עם הפונקציונליות של onclick. פונקציות אלו נמצאות בקטע הקוד הקודם של 'js'.
<תבנית><כרטיס ברק כותרת = 'פרסם את הטקסט שלך' >
<קלט-ברק סוּג = 'טֶקסט' onkeyup = { מידע הנדלר } >< / כניסת ברק>
<כפתור ברק בלחיצה = { publishHandler } תווית = 'לשלוח נתונים' >< / כפתור ברק>
< / ברק-כרטיס>
< / תבנית>
subscribe.js
הטמע את הקוד הזה בקובץ ה-JSON שלך. כאן, אנו נרשמים תחילה למידע על ידי המרתו לאותיות רישיות ואותיות קטנות בנפרד בתוך השיטה callSubscriber() . לאחר מכן, אנו מפעילים שיטה זו באמצעות שיטת connectcallback() . ודא שאתה כולל הצהרת ייבוא זו בתחילת הקוד - ייבוא pubsub מ- 'c/pubsub'.
מֵידָעמידע 2
// מפעיל את ה-callSubscriber()
מחובר התקשרות חזרה ( ) {
זֶה . התקשר מנוי ( )
}
// הירשם למידע על ידי המרה לאותיות רישיות
התקשר מנוי ( ) {
pubsub. להירשם ( 'לְפַרְסֵם' , ( מֵידָע ) => {
זֶה . מֵידָע = מֵידָע. toUpperCase ( ) ;
} ) ,
// הירשם למידע על ידי המרה לאותיות קטנות
pubsub. להירשם ( 'לְפַרְסֵם' , ( מידע 2 ) => {
זֶה . מידע 2 = מידע 2. toLowerCase ( ) ;
} )
}
זה אמור להיראות כך:
subscribe.html
אנו מציגים את הטקסט באותיות רישיות (מאוחסנות במידע) ובאותיות קטנות (מאוחסנות במידע2).
<תבנית><כרטיס ברק כותרת = 'הירשם' >
< div מעמד = 'slds-p-around_medium' >
מידע שהתקבל באותיות רישיות - < ב > {מֵידָע} < / ב >< br >
מידע שהתקבל באותיות קטנות - < ב > {מידע2} < / ב >
< / div >
< / ברק-כרטיס>
< / תבנית>
תְפוּקָה:
הוסף את שני הרכיבים האלה לדף שלך. ודא ששני הרכיבים נמצאים באותו עמוד. אחרת, הפונקציונליות לא תעבוד.
בואו נזין קצת טקסט ברכיב 'פרסם' ונלחץ על כפתור 'שלח נתונים'. אנו יכולים לראות שהטקסט מתקבל באותיות גדולות וקטנות.
סיכום
כעת, אנו מסוגלים לתקשר עם רכיבי LWC באמצעות קונספט האירועים ב-Salesforce LWC. כחלק ממדריך זה, למדנו כיצד לתקשר מההורה לילד ומהילד להורה. המודל של PubSub משמש במקרה שהרכיבים שלך אינם קשורים זה לזה (לא הורה - ילד). כל תרחיש מוסבר עם דוגמה פשוטה וודא שאתה כולל את הקוד שסופק בתחילת מדריך זה בקובץ 'meta-xml'.