Slots
Vue.js (व्यू जेएस) में Slots एक शक्तिशाली फीचर है जो डेवलपर्स को पुन: प्रयोज्य और लचीली कंपोनेंट्स बनाने की अनुमति देता है। Slot का उपयोग एक kind-component के template में placeholder के रूप में किया जाता है, जिसमें parent-component से सामग्री inject की जा सकती है। यह layout और content के separation को बढ़ावा देता है और OOP principles के अनुसार logic और presentation को अलग रखता है।
Slots का उपयोग आमतौर पर dynamic UI components जैसे card, modal, navigation bar या dynamic form में किया जाता है, जहाँ content variable हो सकता है। Vue.js तीन प्रकार के Slots प्रदान करता है: default slot, named slots, और scoped slots। Default slot parent से content न आने पर fallback content दिखाता है। Named slots multiple content regions insert करने में मदद करते हैं, जबकि scoped slots child से parent को डेटा pass करके dynamic rendering सक्षम करते हैं।
इस ट्यूटोरियल के माध्यम से पाठक Vue.js (व्यू जेएस) में Slots का advanced उपयोग सीखेंगे। वे समझेंगे कि कैसे standard, named और scoped slots को effectively implement करके modular, maintainable और high-performance components बनाए जा सकते हैं, जो software architecture में seamless integrate होते हैं।
मूल उदाहरण <template>
text<div class="card">
<slot>
डिफ़ॉल्ट कंटेंट: जब कोई parent content न हो
</slot>
</div>
</template>
<script>
export default {
name: "BaseCard"
};
</script>
<style scoped>
.card {
border: 1px solid #ccc;
padding: 16px;
border-radius: 8px;
}
</style>
<!-- उपयोग -->
<BaseCard>
<p>यह parent से पास किया गया custom content है।</p>
</BaseCard>इस मूल उदाहरण में BaseCard component एक default slot
व्यावहारिक उदाहरण <template>
text<div class="modal">
<header class="modal-header">
<slot name="header">
<h2>डिफ़ॉल्ट शीर्षक</h2>
</slot>
</header>
<section class="modal-body">
<slot :user="userData">
<p>डिफ़ॉल्ट संदेश</p>
</slot>
</section>
<footer class="modal-footer">
<slot name="footer">
<button @click="closeModal">बंद करें</button>
</slot>
</footer>
</div>
</template>
<script>
export default {
name: "UserModal",
data() {
return {
userData: { name: "मोहित शर्मा", role: "Admin" }
};
},
methods: {
closeModal() {
console.log("Modal बंद किया गया");
}
}
};
</script>
<style scoped>
.modal { border: 1px solid #333; padding: 20px; border-radius: 10px; background: #f9f9f9; }
.modal-header, .modal-footer { padding: 10px; background: #eee; }
</style>
<!-- उपयोग -->
<UserModal>
<template #header>
<h1>यूज़र विवरण</h1>
</template>
<template #default="{ user }"> <p>नाम: {{ user.name }}</p> <p>भूमिका: {{ user.role }}</p> </template>
<template #footer>
<button @click="customClose">कस्टम बंद करें</button> </template> </UserModal>यह उदाहरण named slots (#header, #footer) और scoped slot (#default="{ user }") को दर्शाता है। Named slots parent को specific areas override करने की अनुमति देते हैं, जैसे header या footer। Scoped slots child से parent को data भेजते हैं, जिससे dynamic rendering संभव होता है।
Scoped slots dynamic UI components जैसे forms, modals या card lists में उपयोगी होते हैं। यह logic और presentation को अलग रखता है और flexible rendering सुनिश्चित करता है। v-slot और # syntax templates को readable और maintainable बनाते हैं। v-if और v-for का सही उपयोग performance optimization और unnecessary DOM updates को रोकने में मदद करता है।
Vue.js (व्यू जेएस) में Slots के लिए Best Practices और Common Pitfalls:
- Slots को स्पष्ट और semantic नाम दें।
- बड़ी dynamic content को direct render करने से बचें।
- Scoped slots में डेटा existence की जाँच करें।
- v-if और v-for का सही उपयोग करके DOM operations को optimize करें।
- Direct HTML injection से XSS attack का खतरा बढ़ता है, सावधान रहें।
- Vue DevTools का उपयोग कर slot content और data flow debug करें।
- Slots में minimal logic रखें और single responsibility principle follow करें।
📊 संदर्भ तालिका
| Vue.js (व्यू जेएस) Element/Concept | Description | Usage Example |
|---|---|---|
| slot | Parent content के लिए placeholder define करता है | <slot>डिफ़ॉल्ट कंटेंट</slot> |
| Named Slot | Multiple content regions allow करता है | <slot name="header">डिफ़ॉल्ट शीर्षक</slot> |
| Scoped Slot | Child से parent को डेटा pass करता है | <slot :user="userData"></slot> |
| #slot | Parent template में named slots के लिए shorthand | <template #footer>बटन</template> |
| v-slot | Named या scoped slots के लिए modern syntax | <template v-slot:default="{ user }">{{ user.name }}</template> |
Slots सीखना modular, customizable Vue.js (व्यू जेएस) components बनाने के लिए महत्वपूर्ण है। मुख्य concepts हैं default, named, और scoped slots, साथ ही child से parent data pass करना।
Slots state-management (Vuex/Pinia), dynamic component rendering और composition API के साथ seamlessly integrate होते हैं। Practical applications में modals, card lists और dynamic forms शामिल हैं। Best practices का पालन performance, maintainability और security सुनिश्चित करता है। आगे की पढ़ाई के लिए official Vue.js documentation और real-world examples recommended हैं।
🧠 अपने ज्ञान की परीक्षा करें
अपने ज्ञान की परीक्षा करें
इस इंटरैक्टिव क्विज़ के साथ अपनी चुनौती लें और देखें कि आप विषय को कितनी अच्छी तरह समझते हैं
📝 निर्देश
- हर प्रश्न को ध्यान से पढ़ें
- हर प्रश्न के लिए सबसे अच्छा उत्तर चुनें
- आप जितनी बार चाहें क्विज़ दोबारा दे सकते हैं
- आपकी प्रगति शीर्ष पर दिखाई जाएगी