LWC - واقعات

Lwc Waq At



LWC میں واقعات اجزاء کے ساتھ بات چیت کرنے کے لیے استعمال ہوتے ہیں۔ اگر متعلقہ اجزاء ہیں تو، والدین سے بچے یا بچے سے والدین تک بات چیت ممکن ہو سکتی ہے۔ اگر دو غیر متعلقہ اجزاء ہیں، تو ہم PubSub (Publish-Subscribe) ماڈل کے ذریعے یا Lightning Message Service (LMS) کے ساتھ بات چیت کر سکتے ہیں۔ اس گائیڈ میں، ہم اس بات پر تبادلہ خیال کریں گے کہ PubSub ماڈل کا استعمال کرتے ہوئے والدین سے بچے، بچے سے والدین، اور باہم منسلک اجزاء کے ساتھ کیسے بات چیت کی جائے۔

آپ اجزاء کو اپنے ریکارڈ پیج، ایپ پیج یا ہوم پیج میں رکھ سکتے ہیں۔ ہم مثال کے کوڈ کے ٹکڑوں کے تحت اس فائل (میٹا-ایکس ایم ایل) کی دوبارہ وضاحت نہیں کریں گے:







xml ورژن = '1.0' ؟>

< Lightning ComponentBundle xmlns = 'http://soap.sforce.com/2006/04/metadata' >

< apiVersion > 57.0 apiVersion >

< بے نقاب ہے > سچ بے نقاب ہے >

< اہداف >

< ہدف > lightning__Recordpage ہدف >

< ہدف > lightning__AppPage ہدف >

< ہدف > lightning__HomePage ہدف >

اہداف >

لائٹننگ کمپوننٹ بنڈل >

والدین سے بچے کی بات چیت

اگر دو اجزاء ایک دوسرے سے متعلق ہیں، تو یہ مواصلات ممکن ہے. یہاں، والدین بچے کو ڈیٹا بھیجتے ہیں۔ والدین کے حصے میں بچے کا جزو ہوتا ہے۔ اس نقطہ نظر کے ساتھ، ہم پرائمیٹو ڈیٹا (انٹیجر، سٹرنگ، بولین، وغیرہ) کو والدین سے بچے کو منتقل کر سکتے ہیں، نان پرائمیٹو ڈیٹا (Array، Object، Array of Objects، وغیرہ) کو والدین سے بچے کو منتقل کر سکتے ہیں۔ والدین پر کارروائی کے ساتھ بچے کا جزو۔



والدین سے بچے تک بات چیت کرنے کے لیے، ہمیں چائلڈ جزو میں دستیاب فیلڈز، پراپرٹیز اور طریقوں کو عوامی طور پر مرئی بنانے کی ضرورت ہے۔ یہ 'api' ڈیکوریٹر کے ساتھ کھیتوں، خصوصیات اور طریقوں کو سجا کر ممکن ہو سکتا ہے۔



مثال : چائلڈ جزو 'js' فائل میں 'api' کے ساتھ ایک متغیر کا اعلان کریں۔





@ api متغیر ;

اب، پیرنٹ جزو HTML فائل میں چائلڈ جزو کو HTML صفات کے ذریعے استعمال کرتا ہے۔

مثال : پیرنٹ ایچ ٹی ایم ایل فائل میں متغیر کا استعمال کریں۔



< c - بچہ - کمپ متغیر >> c - بچہ - comp >

آئیے کچھ مثالوں پر بات کرتے ہیں جو یہ بیان کرتی ہیں کہ والدین سے بچے کے ساتھ بات چیت کیسے کی جائے۔

مثال 1:

یہ بنیادی مثال ایک ایسی معلومات حاصل کرنے کو ظاہر کرتی ہے جو والدین کی طرف سے بچے کو بھیجی جاتی ہے۔

childtComp.js

سب سے پہلے، ہم ایک چائلڈ جزو بناتے ہیں جس میں 'معلومات' متغیر ہوتا ہے جو عوامی طور پر دستیاب ہے۔

// اے پی آئی ڈیکوریٹر کا استعمال کرتے ہوئے متغیر کو عوامی طور پر اعلان کریں۔

@ API معلومات

آپ مندرجہ ذیل اسکرین شاٹ میں پورا 'js' کوڈ دیکھ سکتے ہیں:

childtComp.html

اب، ہم سینٹر ٹیگ کے اندر HTML فائل میں اس متغیر کی وضاحت کرتے ہیں۔

< سانچے >

< بجلی - کارڈ کا عنوان = 'بچہ' >

< مرکز >



< ب > { معلومات } ب >

مرکز >

بجلی - کارڈ >

سانچے >

parentComp.js

ہم 'js' فائل میں کچھ نہیں کر رہے ہیں۔

parentComp.html

عوامی متغیر (معلومات) کو کچھ متن کے ساتھ پاس کر کے اپنے پیرنٹ ایچ ٹی ایم ایل میں چائلڈ کا پچھلا حصہ رکھیں۔

< سانچے >

< بجلی - کارڈ کا عنوان = 'والدین' آئیکن - نام = 'معیاری: اکاؤنٹ' >



< c - بچہ - comp

معلومات = 'ہیلو، مجھے اطلاع ملی...'

>> c - بچہ - comp >

بجلی - کارڈ >


سانچے >

آؤٹ پٹ:

اب، اپنے Salesforce Org پر جائیں اور بنیادی جزو کو 'ریکارڈ' صفحہ پر رکھیں۔ آپ دیکھیں گے کہ بچے کے جزو نے والدین سے معلومات حاصل کی ہیں۔

مثال 2:

آئیے دو ان پٹ ٹیکسٹ فیلڈز بنائیں جو پیرنٹ جز میں UI سے متن کو متحرک طور پر قبول کریں گے۔ اگر ہم پیرنٹ جز میں پہلا متن داخل کرتے ہیں تو چائلڈ کمپوننٹ کو یہ متن بڑے حروف میں ملتا ہے۔ اسی طرح، اگر ہم دوسرا متن داخل کرتے ہیں تو یہ متن کو چھوٹے حروف میں وصول کرتا ہے۔

childtComp.js

ٹریک ڈیکوریٹر کے ساتھ دو متغیرات - معلومات1 اور معلومات2 - بنائیں۔

  1. 'api' ڈیکوریٹر کے ساتھ convertToUpper() طریقہ بنائیں جو پہلے ان پٹ ٹیکسٹ کو بڑے حروف میں تبدیل کرتا ہے۔
  2. 'api' ڈیکوریٹر کے ساتھ convertToLower() طریقہ بنائیں جو دوسرے ان پٹ ٹیکسٹ کو چھوٹے حروف میں تبدیل کرتا ہے۔
@ ٹریک کی معلومات 1 ;

@ ٹریک کی معلومات 2 ;

@ API

کنورٹ ٹو اپر ( اصل معلومات 1 ) {

یہ . معلومات 1 = اصل معلومات 1۔ ٹو اپر کیس ( ) ;

}

@ API

کنورٹ ٹو لوور ( اصل معلومات 1 ) {

یہ . معلومات 2 = اصل معلومات 1۔ لوئر کیس میں ( ) ;

}

پورا 'js' کوڈ مندرجہ ذیل کی طرح لگتا ہے:

childtComp.html

ہم 'js' فائل سے آنے والی اقدار (Information1 اور Information2) کو ظاہر کرتے ہیں۔

< سانچے >

< بجلی - کارڈ کا عنوان = 'بچہ' >

اپر کیس :& nbsp ; < ب > { معلومات 1 } ب >< بی آر >

لوئر کیس :& nbsp ; < ب > { معلومات 2 } ب >

بجلی - کارڈ >

سانچے >

parentComp.js

ہم ہینڈلر کے دو طریقے بناتے ہیں جو querySelector() کے ذریعے چائلڈ HTML ٹیمپلیٹ کو منتخب کرتے ہیں۔ یقینی بنائیں کہ آپ کو درست طریقے پاس کرنے کی ضرورت ہے جو متن کو بڑے یا چھوٹے میں تبدیل کرتے ہیں۔

ہینڈل ایونٹ 1 ( تقریب ) {

یہ . سانچے . سوال سلیکٹر ( 'c-childt-comp' ) . کنورٹ ٹو اپر ( تقریب. ہدف . قدر ) ;

}

ہینڈل ایونٹ 2 ( تقریب ) {

یہ . سانچے . سوال سلیکٹر ( 'c-childt-comp' ) . کنورٹ ٹو لوور ( تقریب. ہدف . قدر ) ;

}

پورا 'js' کوڈ مندرجہ ذیل کی طرح لگتا ہے:

parentComp.html

ان دونوں کے لیے ہینڈل ایونٹس کے ساتھ ایک ان پٹ ٹیکسٹ بنائیں۔ چائلڈ جزو کو اس پیرنٹ جزو میں رکھیں۔

< سانچے >

< بجلی - کارڈ کا عنوان = 'والدین' >

< مرکز >

< بجلی - ان پٹ لیبل = 'چھوٹے حروف میں متن درج کریں' تبدیلی = { ہینڈل ایونٹ 1 } >> بجلی - ان پٹ >

مرکز >

< بی آر >< بی آر >

< مرکز >

< بجلی - ان پٹ لیبل = 'متن کو بڑے حروف میں درج کریں' تبدیلی = { ہینڈل ایونٹ 2 } >> بجلی - ان پٹ >

مرکز >

< بی آر >< بی آر >< بی آر >



< c - بچہ - comp >> c - بچہ - comp >

بجلی - کارڈ >

سانچے >

آؤٹ پٹ:

اب، اپنے Salesforce Org پر جائیں اور بنیادی جزو کو 'ریکارڈ' صفحہ پر رکھیں۔

آپ کو UI پر دو ٹیکسٹ ان پٹ نظر آئیں گے۔

آئیے پہلے ان پٹ میں کچھ ٹیکسٹ لکھتے ہیں اور آپ دیکھیں گے کہ ٹیکسٹ اپر کیس میں تبدیل ہو گیا ہے اور چائلڈ کمپوننٹ میں ظاہر ہو رہا ہے۔

دوسرے ان پٹ میں کچھ ٹیکسٹ لکھیں اور آپ دیکھیں گے کہ ٹیکسٹ لوئر کیس میں تبدیل ہو گیا ہے اور چائلڈ کمپوننٹ میں دکھایا گیا ہے۔

بچے سے والدین کی بات چیت

پچھلی بات چیت کی طرح، بچے کو والدین تک پہنچانے کے لیے، دونوں اجزاء کا ایک دوسرے سے تعلق ہونا چاہیے۔ ہم بچے کو والدین سے تین مختلف طریقوں سے بات چیت کر سکتے ہیں: ایک سادہ واقعہ کا استعمال کرتے ہوئے والدین کو بچے کے پاس بلانا اور ڈیٹا اور ایونٹ کے ببلنگ والے ایونٹ کا استعمال کرتے ہوئے والدین کو بچے کے پاس بلانا۔ ہم اس گائیڈ میں سادہ واقعہ دیکھیں گے۔

بچے کو والدین تک پہنچانے کے لیے، ہمیں واقعات بنانے اور بھیجنے کی ضرورت ہے۔ اس کے لیے حسب ضرورت ایونٹ بنانا ہوگا۔ حسب ضرورت واقعہ ایک ایسا واقعہ ہوتا ہے جو آپ خود تخلیق کرتے ہیں۔ ہم اسے نئے مطلوبہ الفاظ کا استعمال کرتے ہوئے بنا سکتے ہیں۔ Event_Name کچھ بھی ہو سکتا ہے (یہ ایک تار ہو سکتا ہے، بڑے حروف یا ہندسوں سے آگے نہیں)۔ ابھی کے لیے، ہم اختیارات پر بات نہیں کریں گے۔

نحو : نیا CustomEvent('Event_Name',{options…})

اب، آپ کے پاس حسب ضرورت ایونٹ ہے۔ اگلا مرحلہ ایونٹ کو بھیجنا ہے۔ ایونٹ کو ڈسپیچ کرنے کے لیے، ہمیں ایونٹ کی وضاحت کرنے کی ضرورت ہے جسے ہم نے EventTarget.dispatchEvent() طریقہ میں بنایا ہے۔

نحو :  this.displatchEvent(نیا CustomEvent('Event_Name',{options…})

آخر میں، ہمیں ایونٹ کو سنبھالنے کی ضرورت ہے. اب، ہمیں آپ کے والدین کے جزو میں چائلڈ کمپوننٹ کو کال کرنا ہے۔ اپنے ایونٹ کے نام کے ساتھ 'آن' کا سابقہ ​​لگا کر اپنے ایونٹ کا نام پاس کریں۔ یہ واقعہ سننے والا ہینڈلر لیتا ہے۔

نحو:

< c - بچہ - آپ کے ایونٹ کے نام پر جزو = { سننے والا ہینڈلر } >> c - بچہ - جزو >

مثال:

اس مثال میں، ہم ایک Parent component (exampleParent) اور دو Child component بناتے ہیں۔

  1. پہلے چائلڈ (exampleChild) میں، ہم ایک ان پٹ ٹیکسٹ بناتے ہیں جو صارف کو کچھ متن فراہم کرنے کی اجازت دیتا ہے۔ یہی متن والدین کے جزو میں بڑے حروف میں ظاہر ہوتا ہے۔
  2. دوسرے چائلڈ (چائلڈ 2) میں، ہم ایک ان پٹ ٹیکسٹ بناتے ہیں جو صارف کو کچھ متن فراہم کرنے کی اجازت دیتا ہے۔ یہی متن چھوٹے حروف میں والدین کے جزو میں ظاہر ہوتا ہے۔

exampleChild.js

ہم ایک handleChange1 طریقہ بناتے ہیں جو کہ 'linuxhintevent1' CustomEvent کو ہدف کی قدر کے طور پر تفصیل کے ساتھ تخلیق کرتا ہے۔ اس کے بعد، ہم اس تقریب کو بھیجتے ہیں. اس 'js' فائل میں درج ذیل ٹکڑا ایمبیڈ کریں۔

// ایونٹ کو ہینڈل کریں۔

handleChange1 ( تقریب ) {

تقریب. پہلے سے طے شدہ کو روکیں۔ ( ) ;
const نام 1 = تقریب. ہدف . قدر ;
const ایونٹ 1 کو منتخب کریں۔ = نئی کسٹم ایونٹ ( 'linuxhintevent1' , {
تفصیل : نام 1
} ) ;
یہ . ڈسپیچ ایونٹ ( ایونٹ 1 کو منتخب کریں۔ ) ;

}

exampleChild.html

پچھلا ہینڈل طریقہ جو 'js' میں بنایا گیا ہے اسے HTML جزو میں بجلی کے ان پٹ کی بنیاد پر ہینڈل کیا جاتا ہے۔

< سانچے >

< بجلی - کارڈ کا عنوان = 'بچہ 1' >

< div کلاس = 'slds-m-round_medium' >

< بجلی - ان پٹ لیبل = 'چھوٹے حروف میں متن درج کریں' تبدیلی = { handleChange1 } >> بجلی - ان پٹ >

div >

بجلی - کارڈ >

سانچے >

child2.js

ہم ایک handleChange2 طریقہ بناتے ہیں جو 'linuxhintevent2' CustomEvent کو ہدف کی قدر کے ساتھ تفصیل کے ساتھ تخلیق کرتا ہے۔ اس کے بعد، ہم اس تقریب کو بھیجتے ہیں.

handleChange2 ( تقریب ) {

تقریب. پہلے سے طے شدہ کو روکیں۔ ( ) ;
const name2 = تقریب. ہدف . قدر ;
const ایونٹ 2 کو منتخب کریں۔ = نئی کسٹم ایونٹ ( 'linuxhintevent2' , {
تفصیل : name2
} ) ;
یہ . ڈسپیچ ایونٹ ( ایونٹ 2 کو منتخب کریں۔ ) ;


}

child2.html

پچھلا ہینڈل طریقہ جو 'js' میں بنایا گیا ہے اسے HTML جزو میں بجلی کے ان پٹ کی بنیاد پر ہینڈل کیا جاتا ہے۔

< سانچے >

< بجلی - کارڈ کا عنوان = 'بچہ 2' >

< div کلاس = 'slds-m-round_medium' >

< بجلی - ان پٹ لیبل = 'بڑے حروف میں متن درج کریں' تبدیلی = { handleChange2 } >> بجلی - ان پٹ >

div >

بجلی - کارڈ >

سانچے >

exampleParent.js: اس ٹکڑوں کو کلاس کے اندر اپنی 'js' فائل میں ایمبیڈ کریں۔

  1. handleEvent1() میں toUpperCase() فنکشن کا استعمال کرتے ہوئے ان پٹ کو اپر کیس میں تبدیل کریں اور اسے Information1 متغیر میں اسٹور کریں۔
  2. handleEvent2() میں toLowerCase() فنکشن کا استعمال کرتے ہوئے ان پٹ کو چھوٹے کیس میں تبدیل کریں اور اسے Information2 متغیر میں اسٹور کریں۔
@track Information1;

// 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

اب، دونوں چائلڈ اجزاء کی وضاحت کرکے پیرنٹ ایچ ٹی ایم ایل جزو میں دو متغیرات (Information1 اور Information2) کو ڈسپلے کریں۔

<ٹیمپلیٹ>

<بجلی کا کارڈ عنوان = 'والدین' >

< div کلاس = 'slds-m-round_medium' >

چائلڈ-1 پیغام بڑے حروف میں: < ب > {معلومات1} < / ب >< بی آر >

چائلڈ-2 چھوٹے حروف میں پیغام: < ب > {معلومات2} < / ب >< بی آر >

= { ہینڈل ایونٹ 1 } >< / c-example-child>


< / ب >< بی آر >

= { ہینڈل ایونٹ 2 } >< / c-child2>


< / div >

< / بجلی کا کارڈ>

< / ٹیمپلیٹ>

آؤٹ پٹ:

اب، اپنے Salesforce Org پر جائیں اور بنیادی جزو کو 'ریکارڈ' صفحہ پر رکھیں۔

آپ دیکھ سکتے ہیں کہ والدین میں بچے کے دو اجزاء موجود ہیں۔

آئیے چائلڈ 1 جزو کے تحت ان پٹ ٹیکسٹ میں کچھ متن ٹائپ کریں۔ ہم دیکھ سکتے ہیں کہ ہمارا ٹیکسٹ پیرنٹ جزو پر بڑے حروف میں دکھایا گیا ہے۔

چائلڈ 2 جزو کے تحت ان پٹ ٹیکسٹ میں کچھ متن دیں۔ ہم دیکھ سکتے ہیں کہ ہمارا ٹیکسٹ پیرنٹ جزو پر چھوٹے حروف میں دکھایا گیا ہے۔

ایک وقت میں دونوں عبارتیں درج کرنا بھی ممکن ہو سکتا ہے۔

پبسب ماڈل

جب آپ آزاد اجزاء کے ساتھ کام کر رہے ہوں (ایک دوسرے سے متعلق نہیں) اور اگر آپ معلومات کو ایک جزو سے دوسرے کو بھیجنا چاہتے ہیں، تو آپ اس ماڈل کو استعمال کر سکتے ہیں۔ PubSub کا مطلب ہے شائع کریں اور سبسکرائب کریں۔ وہ جزو جو ڈیٹا بھیجتا ہے اسے پبلیشر کے نام سے جانا جاتا ہے اور وہ جز جو ڈیٹا وصول کرتا ہے اسے سبسکرائبر کہا جاتا ہے۔ اجزاء کے درمیان واقعات بھیجنے کے لیے پبسب ماڈیول کا استعمال کرنا ضروری ہے۔ یہ پہلے سے طے شدہ اور سیلز فورس کے ذریعہ دیا گیا ہے۔ فائل کا نام pubsub ہے۔ آپ کو ایک LWC جزو بنانا ہوگا اور اس کوڈ کو اپنی جاوا اسکرپٹ فائل میں ٹائپ کرنا ہوگا جو کہ 'pubsub.js' ہے۔

مثال:

آئیے دو اجزاء بنائیں - شائع کریں اور سبسکرائب کریں۔

اشاعت میں، ہم صارفین کو ان پٹ ٹیکسٹ بنانے کی اجازت دیتے ہیں۔ بٹن پر کلک کرنے پر، ڈیٹا سبسکرائب جز میں بڑے اور چھوٹے حروف میں موصول ہوتا ہے۔

publish.js

اس کوڈ کو اپنی JSON فائل میں ایمبیڈ کریں۔ یہاں، ہم معلومات حاصل کرتے ہیں اور معلومات شائع کرتے ہیں۔

معلومات کا متغیر بڑے حروف میں ہوگا اور معلومات 1 چھوٹے حروف میں ہوگا۔ اس بات کو یقینی بنائیں کہ آپ اس درآمدی بیان کو کوڈ کے آغاز میں شامل کرتے ہیں - 'c/pubsub' سے pubsub درآمد کریں۔

معلومات

معلومات 2
// بڑے اور چھوٹے حروف میں معلومات حاصل کریں۔
انفارمیشن ہینڈلر ( تقریب ) {
یہ . معلومات = تقریب. ہدف . قدر ;
یہ . معلومات 2 = تقریب. ہدف . قدر ;
}


// دونوں معلومات شائع کریں (بڑے اور چھوٹے حروف میں)
پبلش ہینڈلر ( ) {
پبسب شائع کریں ( 'شائع کریں' ، یہ . معلومات )
پبسب شائع کریں ( 'شائع کریں' ، یہ . معلومات 2 )

}

یہ اس طرح نظر آنا چاہئے:

publish.html

سب سے پہلے، ہم ہینڈلر کی معلومات کے ساتھ متن کو قبول کرنے کے لیے بجلی کا ان پٹ بناتے ہیں۔ اس کے بعد، ایک بٹن آن کلک کی فعالیت کے ساتھ بنتا ہے۔ یہ فنکشنز پچھلے 'js' کوڈ کے ٹکڑوں میں ہیں۔

<ٹیمپلیٹ>

<بجلی کا کارڈ عنوان = 'اپنا متن شائع کریں' >

<بجلی-ان پٹ قسم = 'متن' onkeyup = { انفارمیشن ہینڈلر } >< / بجلی کا ان پٹ>

<بجلی کا بٹن کلک پر = { پبلش ہینڈلر } لیبل = 'ڈیٹا بھیجیں' >< / بجلی کا بٹن>

< / بجلی کا کارڈ>

< / ٹیمپلیٹ>

subscribe.js

اس کوڈ کو اپنی JSON فائل میں ایمبیڈ کریں۔ یہاں، ہم سب سے پہلے کال سبسکرائبر() طریقہ کے اندر معلومات کو بڑے اور چھوٹے میں تبدیل کرکے سبسکرائب کرتے ہیں۔ اس کے بعد، ہم اس طریقہ کو connectedcallback() طریقہ کے ذریعے استعمال کرتے ہیں۔ اس بات کو یقینی بنائیں کہ آپ اس درآمدی بیان کو کوڈ کے آغاز میں شامل کرتے ہیں - 'c/pubsub' سے pubsub درآمد کریں۔

معلومات

معلومات 2

// کال سبسکرائبر () کو طلب کرنا

منسلک کال بیک ( ) {

یہ . کال سبسکرائبر ( )
}
// بڑے حروف میں تبدیل کرکے معلومات کو سبسکرائب کریں۔
کال سبسکرائبر ( ) {


پبسب سبسکرائب ( 'شائع کریں' ، ( معلومات ) => {

یہ . معلومات = معلومات. ٹو اپر کیس ( ) ;

} ) ،


// چھوٹے حروف میں تبدیل کرکے معلومات کو سبسکرائب کریں۔


پبسب سبسکرائب ( 'شائع کریں' ، ( معلومات 2 ) => {

یہ . معلومات 2 = معلومات 2. لوئر کیس میں ( ) ;

} )


}

یہ اس طرح نظر آنا چاہئے:

subscribe.html

ہم متن کو بڑے (معلومات میں ذخیرہ) اور چھوٹے (معلومات2 میں ذخیرہ) میں ظاہر کرتے ہیں۔

<ٹیمپلیٹ>

<بجلی کا کارڈ عنوان = 'سبسکرائب' >

< div کلاس = 'slds-p-round_medium' >

بڑے حروف میں موصول ہونے والی معلومات - < ب > {معلومات} < / ب >< بی آر >

چھوٹے حروف میں موصول ہونے والی معلومات - < ب > {معلومات2} < / ب >

< / div >

< / بجلی کا کارڈ>

< / ٹیمپلیٹ>

آؤٹ پٹ:

ان دو اجزاء کو اپنے صفحہ میں شامل کریں۔ یقینی بنائیں کہ دونوں اجزاء ایک ہی صفحے پر ہیں۔ بصورت دیگر، فعالیت کام نہیں کرے گی۔

آئیے 'پبلش' جز میں کچھ متن درج کریں اور 'ڈیٹا بھیجیں' بٹن پر کلک کریں۔ ہم دیکھ سکتے ہیں کہ متن بڑے اور چھوٹے حروف میں موصول ہوا ہے۔

نتیجہ

اب، ہم سیلز فورس LWC میں ایونٹ کے تصور کے ذریعے LWC اجزاء کے ساتھ بات چیت کرنے کے قابل ہیں۔ اس گائیڈ کے حصے کے طور پر، ہم نے سیکھا کہ والدین سے بچے تک اور بچے سے والدین تک کیسے بات چیت کی جائے۔ PubSub ماڈل اس صورت میں استعمال کیا جاتا ہے جب آپ کے اجزاء ایک دوسرے سے متعلق نہیں ہیں (والدین - بچہ نہیں)۔ ہر منظر نامے کی ایک سادہ مثال کے ساتھ وضاحت کی گئی ہے اور اس بات کو یقینی بنائیں کہ آپ اس گائیڈ کے شروع میں 'meta-xml' فائل میں فراہم کردہ کوڈ کو شامل کریں۔