Slots और scoped slots क्या हैं?

Question

Accepted Answer

**Slots** एक parent को बाल component में **template content** पास करने देते हैं — यह है कि कैसे आप लचकदार, पुनः उपयोग करने योग्य wrappers (कार्ड, मोडल, लेआउट) बनाते हैं जहां उपभोक्ता आंतरिक markup को नियंत्रित करता है। ## Basic slot ```vue ``` ```vue

Title

Any content!

``` बाल एक "छेद" (``) को परिभाषित करता है; parent इसे जो भी markup चाहता है उससे भरता है। यह props के माध्यम से strings पास करने से कहीं अधिक लचकदार है। ## Named slots — कई insertion points ```vue ``` ```vue

Main content (default slot)

``` ## Scoped slots — बाल data को slot content के लिए UP पास करता है कभी-कभी बाल के पास ऐसा data होता है जो parent के slot को चाहिए (उदा. किसी सूची में प्रत्येक item)। **Scoped slots** बाल से parent के template को data को expose करते हैं: ```vue ``` ```vue ``` Scoped slots **renderless/headless components** की कुंजी हैं: बाल logic (looping, fetching, state) को संभालता है और parent को presentation को पूरी तरह से नियंत्रित करने देता है। ## यह क्यों महत्वपूर्ण है Slots Vue की content-distribution mechanism हैं — पुनः उपयोग करने योग्य layout और wrapper components के लिए आवश्यक। Named slots कई insertion points प्रदान करते हैं, और scoped slots (बाल data को parent-defined templates के लिए expose करते हुए) headless components और customizable lists/tables जैसे शक्तिशाली patterns को enable करते हैं। ये वह हैं जो Vue components को rigid के बजाय compositional बनाते हैं।