Slots اور scoped slots کیا ہیں؟

Question

IT Interview Practice · Accepted Answer

**Slots** parent کو **template content** کو child component میں منتقل کرنے دیتے ہیں — یہ flexible، reusable wrappers (cards, modals, layouts) بنانے کا طریقہ ہے جہاں consumer اندرونی markup کو کنٹرول کرتا ہے۔ ## بنیادی slot ```vue ``` ```vue

Title

Any content!

``` Child ایک "hole" (``) کو define کرتا ہے؛ parent اسے جو بھی markup چاہے اس سے بھرتا ہے۔ یہ props کے ذریعے strings منتقل کرنے سے بہت زیادہ flexible ہے۔ ## Named slots — multiple insertion points ```vue ``` ```vue

Main content (default slot)

``` ## Scoped slots — child ڈیٹا کو slot content تک اوپر کی طرف بھیجتا ہے بعض اوقات child کے پاس ڈیٹا ہوتا ہے جس کی parent کے slot کو ضرورت ہے (مثال کے طور پر list میں ہر item)۔ **Scoped slots** child سے ڈیٹا کو parent کے template تک پہنچاتے ہیں: ```vue ``` ```vue ``` Scoped slots **renderless/headless components** کی کلید ہیں: child logic (looping، fetching، state) کو سنبھالتا ہے اور parent کو presentation کو مکمل طور پر کنٹرول کرنے دیتا ہے۔ ## یہ اہم کیوں ہے Slots Vue کا content-distribution mechanism ہے — reusable layout اور wrapper components کے لیے ضروری ہے۔ Named slots متعدد insertion points فراہم کرتے ہیں، اور scoped slots (child ڈیٹا کو parent-defined templates تک بیان کرتے ہوئے) طاقتور patterns جیسے headless components اور customizable lists/tables کو فعال کرتے ہیں۔ یہ وہ ہے جو Vue components کو rigid کی بجائے compositional بناتا ہے۔

بنیادی slot

Named slots — multiple insertion points

Scoped slots — child ڈیٹا کو slot content تک اوپر کی طرف بھیجتا ہے

یہ اہم کیوں ہے

متعلقہ سوالات