เหตุการณ์ใน LWC ใช้เพื่อสื่อสารกับส่วนประกอบ หากมีองค์ประกอบที่เกี่ยวข้องกัน ก็สามารถสื่อสารจาก Parent to Child หรือ Child to Parent ได้ หากมีองค์ประกอบสองส่วนที่ไม่เกี่ยวข้องกัน เราสามารถสื่อสารผ่านโมเดล PubSub (เผยแพร่-สมัครสมาชิก) หรือกับ Lightning Message Service (LMS) ในคู่มือนี้ เราจะพูดถึงวิธีสื่อสารกับเหตุการณ์ตั้งแต่ระดับผู้ปกครองถึงระดับรอง ระดับรองถึงระดับสูงสุด และองค์ประกอบที่เกี่ยวข้องกันโดยใช้โมเดล PubSub
คุณสามารถวางส่วนประกอบต่างๆ ลงในหน้าบันทึก หน้าแอพ หรือโฮมเพจได้ เราจะไม่ระบุไฟล์นี้ (meta-xml) อีกครั้งภายใต้ตัวอย่างโค้ด:
เวอร์ชัน xml = '1.0' ?>
< LightningComponentBundle xmlns = 'http://soap.sforce.com/2006/04/metadata' >
< apiเวอร์ชัน > 57.0 apiเวอร์ชัน >
< ถูกเปิดเผย > จริง ถูกเปิดเผย >
< เป้าหมาย >
< เป้า > ฟ้าผ่า__RecordPage เป้า >
< เป้า > สายฟ้า__AppPage เป้า >
< เป้า > ฟ้าผ่า__หน้าแรก เป้า >
เป้าหมาย >
LightningComponentBundle >
การสื่อสารระหว่างผู้ปกครองกับเด็ก
หากองค์ประกอบทั้งสองเกี่ยวข้องกัน การสื่อสารนี้ก็เป็นไปได้ ที่นี่ผู้ปกครองส่งข้อมูลไปยังเด็ก องค์ประกอบหลักถือองค์ประกอบย่อย ด้วยแนวทางนี้ เราสามารถส่งข้อมูลดั้งเดิม (จำนวนเต็ม สตริง บูลีน ฯลฯ) จากพาเรนต์ไปยังลูก ส่งข้อมูลที่ไม่ใช่แบบดั้งเดิม (อาร์เรย์ วัตถุ อาร์เรย์ของออบเจ็กต์ ฯลฯ) จากพาเรนต์ถึงลูก ส่งข้อมูลไปยัง องค์ประกอบย่อยที่มีการดำเนินการกับผู้ปกครอง
ในการสื่อสารระหว่างผู้ปกครองกับเด็ก เราจำเป็นต้องทำให้ฟิลด์ คุณสมบัติ และเมธอดที่มีอยู่ในคอมโพเนนต์ Child ปรากฏต่อสาธารณะ สิ่งนี้สามารถทำได้โดยการตกแต่งฟิลด์ คุณสมบัติ และวิธีการด้วยมัณฑนากร 'api'
ตัวอย่าง : ประกาศตัวแปรด้วย “api” ในไฟล์ Child Component “js”
@ ตัวแปร api ;
ตอนนี้ องค์ประกอบหลักใช้องค์ประกอบย่อยในไฟล์ HTML ผ่านทางแอตทริบิวต์ HTML
ตัวอย่าง : ใช้ตัวแปรในไฟล์ Parent HTML
< ค - - เด็ก - - ตัวแปรคอมพ์ > ค - - เด็ก - - คอมพ์ >
เราจะมาพูดถึงตัวอย่างบางส่วนที่อธิบายวิธีสื่อสารกับผู้ปกครองถึงเด็ก
ตัวอย่างที่ 1:
ตัวอย่างพื้นฐานนี้แสดงให้เห็นถึงการรับข้อมูลที่ผู้ปกครองส่งไปยังเด็ก
childtComp.js
ขั้นแรก เราสร้างองค์ประกอบย่อยที่เก็บตัวแปร 'ข้อมูล' ซึ่งเปิดเผยต่อสาธารณะ
// ประกาศตัวแปรให้เป็นแบบสาธารณะโดยใช้ api Decorator@ ข้อมูล API
คุณสามารถดูโค้ด “js” ทั้งหมดได้ในภาพหน้าจอต่อไปนี้:
childtComp.html
ตอนนี้เราระบุตัวแปรนี้ในไฟล์ HTML ภายในแท็กกึ่งกลาง
< แม่แบบ >< ฟ้าผ่า - - ชื่อการ์ด = 'เด็ก' >
< ศูนย์ >
< ข > { ข้อมูล } ข >
ศูนย์ >
ฟ้าผ่า - - การ์ด >
แม่แบบ >
parentComp.js
เราไม่ได้ทำอะไรในไฟล์ 'js'
parentComp.html
วางองค์ประกอบลูกก่อนหน้าใน HTML หลักของคุณโดยส่งตัวแปรสาธารณะ (ข้อมูล) พร้อมข้อความบางส่วน
< แม่แบบ >< ฟ้าผ่า - - ชื่อการ์ด = 'พ่อแม่' ไอคอน - - ชื่อ = 'มาตรฐาน:บัญชี' >
< ค - - เด็ก - - คอมพ์
ข้อมูล = “สวัสดี ฉันได้รับข้อมูลแล้ว...”
> ค - - เด็ก - - คอมพ์ >
ฟ้าผ่า - - การ์ด >
แม่แบบ >
เอาท์พุท:
ตอนนี้ ไปที่องค์กร Salesforce ของคุณและวางองค์ประกอบหลักลงในหน้า 'บันทึก' คุณจะเห็นว่าองค์ประกอบลูกได้รับข้อมูลจากผู้ปกครอง
ตัวอย่างที่ 2:
มาสร้างช่องข้อความอินพุตสองช่องซึ่งจะยอมรับข้อความแบบไดนามิกจาก UI ในองค์ประกอบหลัก หากเราแทรกข้อความแรกในองค์ประกอบหลัก องค์ประกอบย่อยจะได้รับข้อความนี้เป็นตัวพิมพ์ใหญ่ ในทำนองเดียวกันจะได้รับข้อความเป็นตัวพิมพ์เล็กหากเราแทรกข้อความที่สอง
childtComp.js
สร้างตัวแปรสองตัว - ข้อมูล 1 และ ข้อมูล 2 - ด้วยเครื่องมือตกแต่งแทร็ก
- สร้างเมธอด ConvertToUpper() ด้วยมัณฑนากร “api” ซึ่งจะแปลงข้อความอินพุตแรกเป็นตัวพิมพ์ใหญ่
- สร้างเมธอด ConvertToLower() ด้วยมัณฑนากร “api” ซึ่งจะแปลงข้อความอินพุตที่สองเป็นตัวพิมพ์เล็ก
@ ติดตามข้อมูล2 ;
@ เอพีไอ
แปลงเป็นUpper ( ข้อมูลจริง1 ) {
นี้ . ข้อมูล1 = ข้อมูลจริง1. ถึงUpperCase ( ) ;
}
@ เอพีไอ
แปลงเป็นล่าง ( ข้อมูลจริง1 ) {
นี้ . ข้อมูล2 = ข้อมูลจริง1. ถึงตัวพิมพ์เล็ก ( ) ;
}
รหัส “js” ทั้งหมดมีลักษณะดังนี้:
childtComp.html
เราแสดงค่า (Information1 และ Information2) ที่มาจากไฟล์ 'js'
< แม่แบบ >< ฟ้าผ่า - - ชื่อการ์ด = 'เด็ก' >
ตัวพิมพ์ใหญ่ :& nbsp ; < ข > { ข้อมูล1 } ข >< พี่ชาย >
ตัวพิมพ์เล็ก :& nbsp ; < ข > { ข้อมูล2 } ข >
ฟ้าผ่า - - การ์ด >
แม่แบบ >
parentComp.js
เราสร้างวิธีจัดการสองวิธีที่เลือกเทมเพลต HTML ลูกผ่าน querySelector() ตรวจสอบให้แน่ใจว่าคุณต้องผ่านวิธีการที่ถูกต้องในการแปลงข้อความเป็นตัวพิมพ์ใหญ่หรือตัวพิมพ์เล็ก
จัดการเหตุการณ์1 ( เหตุการณ์ ) {นี้ . แม่แบบ . ตัวเลือกแบบสอบถาม ( 'c-childt-com' ) . แปลงเป็นUpper ( เหตุการณ์. เป้า . ค่า ) ;
}
จัดการเหตุการณ์2 ( เหตุการณ์ ) {
นี้ . แม่แบบ . ตัวเลือกแบบสอบถาม ( 'c-childt-com' ) . แปลงเป็นล่าง ( เหตุการณ์. เป้า . ค่า ) ;
}
รหัส “js” ทั้งหมดมีลักษณะดังนี้:
parentComp.html
สร้างข้อความอินพุตพร้อมจัดการเหตุการณ์สำหรับทั้งคู่ วางองค์ประกอบย่อยไว้ในองค์ประกอบหลักนี้
< แม่แบบ >< ฟ้าผ่า - - ชื่อการ์ด = 'พ่อแม่' >
< ศูนย์ >
< ฟ้าผ่า - - ป้ายกำกับอินพุต = 'กรอกข้อความเป็นตัวพิมพ์เล็ก' เมื่อมีการเปลี่ยนแปลง = { จัดการเหตุการณ์1 } > ฟ้าผ่า - - ป้อนข้อมูล >
ศูนย์ >
< พี่ชาย >< พี่ชาย >
< ศูนย์ >
< ฟ้าผ่า - - ป้ายกำกับอินพุต = 'ป้อนข้อความเป็นตัวพิมพ์ใหญ่' เมื่อมีการเปลี่ยนแปลง = { จัดการเหตุการณ์2 } > ฟ้าผ่า - - ป้อนข้อมูล >
ศูนย์ >
< พี่ชาย >< พี่ชาย >< พี่ชาย >
< ค - - เด็ก - - คอมพ์ > ค - - เด็ก - - คอมพ์ >
ฟ้าผ่า - - การ์ด >
แม่แบบ >
เอาท์พุท:
ตอนนี้ ไปที่องค์กร Salesforce ของคุณและวางองค์ประกอบหลักลงในหน้า 'บันทึก'
คุณจะเห็นการป้อนข้อความสองรายการบน UI
มาเขียนข้อความในส่วนอินพุตแรกแล้วคุณจะเห็นว่าข้อความถูกแปลงเป็นตัวพิมพ์ใหญ่และแสดงในองค์ประกอบย่อย
เขียนข้อความลงในอินพุตที่สองแล้วคุณจะเห็นว่าข้อความถูกแปลงเป็นตัวพิมพ์เล็กและแสดงในองค์ประกอบย่อย
การสื่อสารระหว่างเด็กกับผู้ปกครอง
เช่นเดียวกับการสื่อสารก่อนหน้านี้ ในการสื่อสารเด็กกับผู้ปกครอง ทั้งสององค์ประกอบควรเกี่ยวข้องกัน เราสามารถสื่อสารเด็กกับผู้ปกครองได้สามวิธี: เรียกผู้ปกครองไปหาเด็กโดยใช้เหตุการณ์ง่ายๆ และการเรียกผู้ปกครองไปหาเด็กโดยใช้เหตุการณ์ที่มีข้อมูลและเหตุการณ์เดือดพล่าน เราจะดูเหตุการณ์ง่ายๆ ในคู่มือนี้
เพื่อสื่อสารระหว่างเด็กกับผู้ปกครอง เราจำเป็นต้องสร้างและจัดส่งกิจกรรม เพื่อทำเช่นนั้น จะต้องสร้างเหตุการณ์ที่กำหนดเองขึ้นมา เหตุการณ์ที่กำหนดเองคือเหตุการณ์ที่คุณสร้างขึ้นเอง เราสามารถสร้างมันขึ้นมาได้โดยใช้คำสำคัญใหม่ Event_Name อาจเป็นอะไรก็ได้ (อาจเป็นสตริง ไม่เกินตัวพิมพ์ใหญ่ หรือตัวเลข) ในตอนนี้ เราจะไม่พูดถึงตัวเลือกต่างๆ
ไวยากรณ์ : CustomEvent ใหม่ ('Event_Name', {options…})
ตอนนี้ คุณมีเหตุการณ์แบบกำหนดเองแล้ว ขั้นตอนต่อไปคือการจัดส่งกิจกรรม ในการจัดส่งเหตุการณ์ เราจำเป็นต้องระบุเหตุการณ์ที่เราสร้างขึ้นในเมธอด EventTarget.dispatchEvent()
ไวยากรณ์ : this.displatchEvent(CustomEvent ใหม่ ('Event_Name', {options…})
ในที่สุดเราก็ต้องจัดการกับเหตุการณ์นี้ ตอนนี้ เราต้องเรียกองค์ประกอบลูกในองค์ประกอบหลักของคุณ ส่งชื่อกิจกรรมของคุณโดยระบุคำนำหน้า 'เปิด' ให้กับชื่อกิจกรรมของคุณ สิ่งนี้จะใช้ตัวจัดการตัวฟังเหตุการณ์
ไวยากรณ์:
< ค - - เด็ก - - ส่วนประกอบ onyourEventName = { ผู้ฟังHandler } > ค - - เด็ก - - ส่วนประกอบ >ตัวอย่าง:
ในตัวอย่างนี้ เราสร้างองค์ประกอบหลักหนึ่งรายการ (exampleParent) และองค์ประกอบย่อยสองรายการ
- ใน Child แรก (exampleChild) เราสร้างข้อความอินพุตที่อนุญาตให้ผู้ใช้ระบุข้อความบางส่วน ข้อความเดียวกันนี้จะแสดงอยู่ในองค์ประกอบหลักด้วยตัวพิมพ์ใหญ่
- ในลูกคนที่สอง (child2) เราสร้างข้อความอินพุตที่อนุญาตให้ผู้ใช้ระบุข้อความบางส่วน ข้อความเดียวกันนี้จะแสดงอยู่ในองค์ประกอบหลักด้วยตัวพิมพ์เล็ก
ตัวอย่างChild.js
เราสร้างเมธอด handleChange1 ที่สร้าง CustomEvent “linuxhintevent1” โดยมีรายละเอียดเป็นค่าเป้าหมาย หลังจากนั้นเราก็จัดส่งกิจกรรมนี้ ฝังตัวอย่างต่อไปนี้ในไฟล์ 'js' นี้
// จัดการเหตุการณ์จัดการการเปลี่ยนแปลง1 ( เหตุการณ์ ) {
เหตุการณ์. ป้องกันค่าเริ่มต้น ( ) ;
ค่าคงที่ ชื่อ1 = เหตุการณ์. เป้า . ค่า ;
ค่าคงที่ เลือกเหตุการณ์1 = ใหม่ เหตุการณ์ที่กำหนดเอง ( 'linuxhintevent1' , {
รายละเอียด : : ชื่อ1
} ) ;
นี้ . จัดส่งEvent ( เลือกเหตุการณ์1 ) ;
}
ตัวอย่างเด็ก.html
วิธีการจัดการก่อนหน้านี้ที่สร้างขึ้นใน “js” ได้รับการจัดการตามอินพุต lightning ในองค์ประกอบ HTML
< แม่แบบ >< ฟ้าผ่า - - ชื่อการ์ด = 'เด็ก 1' >
< กอง ระดับ = 'slds-m-around_medium' >
< ฟ้าผ่า - - ป้ายกำกับอินพุต = 'ป้อนข้อความเป็นตัวพิมพ์เล็ก' เมื่อมีการเปลี่ยนแปลง = { จัดการการเปลี่ยนแปลง1 } > ฟ้าผ่า - - ป้อนข้อมูล >
กอง >
ฟ้าผ่า - - การ์ด >
แม่แบบ >
เด็ก2.js
เราสร้างเมธอด handleChange2 ที่สร้าง CustomEvent “linuxhintevent2” โดยมีรายละเอียดเป็นค่าเป้าหมาย หลังจากนั้นเราก็จัดส่งกิจกรรมนี้
จัดการการเปลี่ยนแปลง2 ( เหตุการณ์ ) {เหตุการณ์. ป้องกันค่าเริ่มต้น ( ) ;
ค่าคงที่ ชื่อ2 = เหตุการณ์. เป้า . ค่า ;
ค่าคงที่ เลือกกิจกรรม2 = ใหม่ เหตุการณ์ที่กำหนดเอง ( 'linuxhintevent2' , {
รายละเอียด : : ชื่อ2
} ) ;
นี้ . จัดส่งEvent ( เลือกกิจกรรม2 ) ;
}
เด็ก2.html
วิธีการจัดการก่อนหน้านี้ที่สร้างขึ้นใน “js” ได้รับการจัดการตามอินพุต lightning ในองค์ประกอบ HTML
< แม่แบบ >< ฟ้าผ่า - - ชื่อการ์ด = 'เด็ก 2' >
< กอง ระดับ = 'slds-m-around_medium' >
< ฟ้าผ่า - - ป้ายกำกับอินพุต = 'ป้อนข้อความเป็นตัวพิมพ์ใหญ่' เมื่อมีการเปลี่ยนแปลง = { จัดการการเปลี่ยนแปลง2 } > ฟ้าผ่า - - ป้อนข้อมูล >
กอง >
ฟ้าผ่า - - การ์ด >
แม่แบบ >
exampleParent.js: ฝังตัวอย่างนี้ในไฟล์ 'js' ของคุณภายในชั้นเรียน
- แปลงอินพุตเป็นตัวพิมพ์ใหญ่โดยใช้ฟังก์ชัน toUpperCase() ใน handleEvent1() และจัดเก็บไว้ในตัวแปร Information1
- แปลงอินพุตเป็นตัวพิมพ์เล็กโดยใช้ฟังก์ชัน toLowerCase() ใน handleEvent2() และจัดเก็บไว้ในตัวแปร Information2
// แปลงอินพุตเป็นตัวพิมพ์ใหญ่โดยใช้ฟังก์ชัน toUpperCase()
// ใน handleEvent1() และเก็บไว้ในตัวแปร Information1
handleEvent1 (เหตุการณ์) {
const input1 = event.detail;
this.Information1 = input1.toUpperCase();
}
@ข้อมูลการติดตาม2;
// แปลงอินพุตเป็นตัวพิมพ์เล็กโดยใช้ฟังก์ชัน toLowerCase()
// ใน handleEvent2() และเก็บไว้ในตัวแปร Information2
handleEvent2 (เหตุการณ์) {
const input2 = event.detail;
this.Information2 = input2.toLowerCase();
}
ตัวอย่างParent.html
ตอนนี้ แสดงตัวแปรทั้งสอง (Information1 & Information2) ในองค์ประกอบหลัก HTML โดยการระบุทั้งสององค์ประกอบลูก
<แม่แบบ><การ์ดสายฟ้า ชื่อ = 'พ่อแม่' >
< กอง ระดับ = 'slds-m-around_medium' >
ข้อความ Child-1 เป็นตัวพิมพ์ใหญ่: < ข > {ข้อมูล1} < / ข >< พี่ชาย >
ข้อความ Child-2 เป็นตัวพิมพ์เล็ก: < ข > {ข้อมูล2} < / ข >< พี่ชาย >
< / ข >< พี่ชาย >
< / กอง >
< / การ์ดสายฟ้า>
< / แม่แบบ>
เอาท์พุท:
ตอนนี้ ไปที่องค์กร Salesforce ของคุณและวางองค์ประกอบหลักลงในหน้า 'บันทึก'
คุณจะเห็นว่าองค์ประกอบย่อยสองรายการมีอยู่ในพาเรนต์
มาพิมพ์ข้อความในข้อความที่ป้อนใต้องค์ประกอบ Child 1 เราจะเห็นว่าข้อความของเราแสดงเป็นตัวพิมพ์ใหญ่ในองค์ประกอบหลัก
ใส่ข้อความในข้อความอินพุตภายใต้องค์ประกอบ Child 2 เราจะเห็นว่าข้อความของเราแสดงเป็นตัวพิมพ์เล็กในองค์ประกอบหลัก
นอกจากนี้ยังสามารถป้อนทั้งสองข้อความพร้อมกันได้
PubSub โมเดล
เมื่อคุณทำงานกับส่วนประกอบที่เป็นอิสระ (ไม่เกี่ยวข้องกัน) และหากคุณต้องการส่งข้อมูลจากส่วนประกอบหนึ่งไปยังอีกส่วนประกอบหนึ่ง คุณสามารถใช้โมเดลนี้ได้ PubSub ย่อมาจาก Publish และ Subscribe ส่วนประกอบที่ส่งข้อมูลเรียกว่าผู้เผยแพร่ และส่วนประกอบที่รับข้อมูลเรียกว่าสมาชิก จำเป็นต้องใช้โมดูล pubsub เพื่อส่งเหตุการณ์ระหว่างส่วนประกอบต่างๆ มีการกำหนดไว้ล่วงหน้าและมอบให้โดย Salesforce ชื่อไฟล์คือ pubsub คุณต้องสร้างส่วนประกอบ LWC และพิมพ์รหัสนี้ในไฟล์จาวาสคริปต์ของคุณซึ่งก็คือ “pubsub.js”
ตัวอย่าง:
มาสร้างสององค์ประกอบ – เผยแพร่และสมัครสมาชิก
ใน Publish เราอนุญาตให้ผู้ใช้สร้างข้อความที่ป้อนได้ เมื่อคลิกปุ่ม ข้อมูลจะได้รับเป็นตัวพิมพ์ใหญ่และตัวพิมพ์เล็กในส่วนประกอบสมัครสมาชิก
เผยแพร่ js
ฝังโค้ดนี้ในไฟล์ JSON ของคุณ ที่นี่เราได้รับข้อมูลและเผยแพร่ข้อมูล
ตัวแปรข้อมูลจะเป็นตัวพิมพ์ใหญ่ และข้อมูล1 จะเป็นตัวพิมพ์เล็ก ตรวจสอบให้แน่ใจว่าคุณรวมคำสั่งนำเข้านี้ไว้ที่จุดเริ่มต้นของโค้ด – นำเข้า pubsub จาก 'c/pubsub'
ข้อมูลข้อมูล2
// รับข้อมูลเป็นตัวพิมพ์ใหญ่และตัวพิมพ์เล็ก
ข้อมูลตัวจัดการ ( เหตุการณ์ ) {
นี้ . ข้อมูล = เหตุการณ์. เป้า . ค่า ;
นี้ . ข้อมูล2 = เหตุการณ์. เป้า . ค่า ;
}
// เผยแพร่ทั้งข้อมูล (ตัวพิมพ์ใหญ่และตัวพิมพ์เล็ก)
เผยแพร่Handler ( ) {
ผับซับ เผยแพร่ ( 'เผยแพร่' , นี้ . ข้อมูล )
ผับซับ เผยแพร่ ( 'เผยแพร่' , นี้ . ข้อมูล2 )
}
มันควรมีลักษณะดังนี้:
เผยแพร่.html
ขั้นแรก เราสร้างอินพุตฟ้าผ่าเพื่อรับข้อความที่มีข้อมูลตัวจัดการ หลังจากนั้นปุ่มเดียวจะถูกสร้างขึ้นด้วยฟังก์ชัน onclick ฟังก์ชันเหล่านี้อยู่ในข้อมูลโค้ด “js” ก่อนหน้า
<แม่แบบ><การ์ดสายฟ้า ชื่อ = 'เผยแพร่ข้อความของคุณ' >
<อินพุตสายฟ้า พิมพ์ = 'ข้อความ' ออนคีย์อัพ = { ข้อมูลตัวจัดการ } >< / ฟ้าผ่าอินพุต>
<ปุ่มสายฟ้า เมื่อคลิก = { เผยแพร่Handler } ฉลาก = “ส่งข้อมูล” >< / ปุ่มฟ้าผ่า>
< / การ์ดสายฟ้า>
< / แม่แบบ>
สมัครสมาชิก js
ฝังโค้ดนี้ในไฟล์ JSON ของคุณ ที่นี่ อันดับแรกเราสมัครรับข้อมูลโดยแปลงเป็นตัวพิมพ์ใหญ่และตัวพิมพ์เล็กแยกกันภายในเมธอด callSubscriber() หลังจากนั้นเราเรียกใช้วิธีนี้ผ่านวิธีconnectedcallback() ตรวจสอบให้แน่ใจว่าคุณรวมคำสั่งนำเข้านี้ไว้ที่จุดเริ่มต้นของโค้ด – นำเข้า pubsub จาก 'c/pubsub'
ข้อมูลข้อมูล2
// เรียก callSubscriber()
เชื่อมต่อโทรกลับ ( ) {
นี้ . โทรสมาชิก ( )
}
// สมัครสมาชิกข้อมูลโดยการแปลงเป็นตัวพิมพ์ใหญ่
โทรสมาชิก ( ) {
ผับซับ ติดตาม ( 'เผยแพร่' , ( ข้อมูล ) => {
นี้ . ข้อมูล = ข้อมูล. ถึงUpperCase ( ) ;
} ) ,
// สมัครสมาชิกข้อมูลโดยการแปลงเป็นตัวพิมพ์เล็ก
ผับซับ ติดตาม ( 'เผยแพร่' , ( ข้อมูล2 ) => {
นี้ . ข้อมูล2 = ข้อมูล2. ถึงตัวพิมพ์เล็ก ( ) ;
} )
}
มันควรมีลักษณะเช่นนี้:
สมัครสมาชิก.html
เราแสดงข้อความเป็นตัวพิมพ์ใหญ่ (เก็บไว้ในข้อมูล) และตัวพิมพ์เล็ก (เก็บไว้ใน information2)
<แม่แบบ><การ์ดสายฟ้า ชื่อ = 'ติดตาม' >
< กอง ระดับ = 'slds-p-around_medium' >
ข้อมูลที่ได้รับเป็นตัวพิมพ์ใหญ่ - < ข > {ข้อมูล} < / ข >< พี่ชาย >
ข้อมูลที่ได้รับเป็นตัวพิมพ์เล็ก - < ข > {ข้อมูล2} < / ข >
< / กอง >
< / การ์ดสายฟ้า>
< / แม่แบบ>
เอาท์พุท:
เพิ่มองค์ประกอบทั้งสองนี้ลงในเพจของคุณ ตรวจสอบให้แน่ใจว่าส่วนประกอบทั้งสองอยู่ในหน้าเดียวกัน มิฉะนั้นฟังก์ชันการทำงานจะไม่ทำงาน
มาป้อนข้อความในองค์ประกอบ 'เผยแพร่' แล้วคลิกปุ่ม 'ส่งข้อมูล' เราจะเห็นได้ว่าข้อความที่ได้รับเป็นตัวพิมพ์ใหญ่และตัวพิมพ์เล็ก
บทสรุป
ตอนนี้ เราสามารถสื่อสารกับส่วนประกอบ LWC ผ่านแนวคิดเหตุการณ์ใน Salesforce LWC ได้ ในส่วนหนึ่งของคู่มือนี้ เราได้เรียนรู้วิธีการสื่อสารจากผู้ปกครองถึงเด็ก และจากเด็กถึงผู้ปกครอง โมเดล PubSub จะใช้ในกรณีที่ส่วนประกอบของคุณไม่เกี่ยวข้องกัน (ไม่ใช่ระดับบน-ล่าง) แต่ละสถานการณ์ได้รับการอธิบายด้วยตัวอย่างง่ายๆ และตรวจสอบให้แน่ใจว่าคุณได้รวมโค้ดที่ให้ไว้ตอนต้นของคู่มือนี้ในไฟล์ “meta-xml”