Slots का परिचय
Slots एक parent को एक child component के template के अंदर अपना content रखने देते हैं।
In this page:
Syntax
<!-- child template -->
<div><slot>default content</slot></div>
<!-- parent template -->
<child-name>content to insert</child-name>Slots
एक child slot element से एक spot mark करता है, और parent component tags के बीच content रखता है। Named slots कई insertion points के लिए v-slot:name (short #name) इस्तेमाल करते हैं, और जब कुछ न दिया जाए fallback content दिखता है।
Scoped slots child को slot content में data वापस pass करने देते हैं।
Note:
Cards और modals जैसे flexible layout components बनाने के लिए slots इस्तेमाल करें।
उदाहरण: Slots
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<script src="https://unpkg.com/vue@3/dist/vue.global.js"></script>
</head>
<body>
<div id="app">
<fancy-card>
<template #header>Profile</template>
<p>Ada Lovelace, mathematician</p>
<template #footer>Since 1843</template>
</fancy-card>
<fancy-card><p>No header or footer here</p></fancy-card>
</div>
<script>
const app = Vue.createApp({});
app.component("fancy-card", {
template: `<section style="border:1px solid #999;margin:4px;padding:4px">
<header><slot name="header">Default header</slot></header>
<slot></slot>
<footer><slot name="footer">Default footer</slot></footer>
</section>`,
});
app.mount("#app");
</script>
</body>
</html>
<!-- Output:
Rendered: ProfileAda Lovelace, mathematicianSince 1843Default headerNo header or footer hereDefault footer
-->Live Example
Related Topics
{# common_mistakes/chapter_summary/browser_support: on Hindi pages the
view already swaps in the hi_ translation fields (or blanks these
out if untranslated), so this renders correctly for both languages
without a lang_code check here. #}
आम गलतियां
- child में slot element भूल जाना
- old slot attribute syntax इस्तेमाल करना
- कौन-से scope variables available हैं यह mix up करना
चैप्टर सारांश
- slot बताता है content कहाँ जाता है
- Named slots #name इस्तेमाल करते हैं
- Fallback content supported है
- Scoped slots data ऊपर pass करते हैं
🔒
Chapter Quiz — Complete all 7 topics to unlock
0/7 topics done
Complete these topics first: