Vue.js
स्लॉट्स
खोज…
टिप्पणियों
महत्वपूर्ण! रेंडर के बाद स्लॉट स्लॉट के लिए पदों के लिए आदेश की गारंटी नहीं देते हैं। स्लॉट, जो पहले था, रेंडर करने के बाद एक अलग स्थिति हो सकती है।
एकल स्लॉट का उपयोग करना
एकल स्लॉट का उपयोग तब किया जाता है जब एक बच्चा घटक केवल अपने टेम्पलेट के भीतर एक slot को परिभाषित करता है। सामग्री को वितरित करने के लिए ऊपर दिया गया page घटक एकल स्लॉट का उपयोग करता है।
एकल घटक का उपयोग करने वाले page घटक के टेम्पलेट का एक उदाहरण नीचे दिया गया है:
<html>
<head>
<title>Page Title</title>
</head>
<body>
<slot>
This will only be displayed if there is no content
to be distributed.
</slot>
</body>
</html>
यह वर्णन करने के लिए कि स्लॉट कैसे काम करता है हम इस प्रकार एक पृष्ठ सेट कर सकते हैं।
<page>
<p>This content will be displayed within the page component</p>
</page>
अंतिम परिणाम होगा:
<html>
<head>
<title>Page Title</title>
</head>
<body>
<p>This content will be displayed within the page component</p>
</body>
</html>
यदि हमने page टैग के बीच कुछ भी नहीं रखा है, तो इसके बजाय <page></page> हम निम्नलिखित परिणाम प्राप्त करेंगे क्योंकि page घटक टेम्पलेट में slot टैग के बीच डिफ़ॉल्ट सामग्री है।
<html>
<head>
<title>Page Title</title>
</head>
<body>
This will only be displayed if there is no content
to be distributed.
</body>
</html>
स्लॉट्स क्या हैं?
स्लॉट माता-पिता के घटक से बच्चे के घटक तक सामग्री वितरित करने का एक सुविधाजनक तरीका प्रदान करते हैं। यह सामग्री पाठ, HTML या अन्य घटकों से कुछ भी हो सकती है।
यह कभी-कभी स्लॉट्स के बारे में सोचने के लिए सामग्री को सीधे बच्चे के घटक के टेम्पलेट में इंजेक्ट करने के लिए सहायक हो सकता है।
स्लॉट विशेष रूप से उपयोगी होते हैं जब मूल घटक के नीचे घटक संरचना हमेशा समान नहीं होती है।
निम्नलिखित उदाहरण लें जहां हमारे पास एक page घटक है। पृष्ठ की सामग्री इस आधार पर बदल सकती है कि क्या वह पृष्ठ किसी लेख, ब्लॉग पोस्ट या फ़ॉर्म को प्रदर्शित करता है।
लेख
<page>
<article></article>
<comments></comments>
</page>
ब्लॉग पोस्ट
<page>
<blog-post></blog-post>
<comments></comments>
</page>
प्रपत्र
<page>
<form></form>
</page>
ध्यान दें कि page घटक की सामग्री कैसे बदल सकती है। यदि हम स्लॉट का उपयोग नहीं करते हैं तो यह अधिक कठिन होगा क्योंकि टेम्पलेट का आंतरिक भाग तय किया जाएगा।
याद रखें: "माता-पिता के टेम्पलेट में सब कुछ माता-पिता के दायरे में संकलित किया गया है; बच्चे के टेम्पलेट में सब कुछ बच्चे के दायरे में संकलित किया गया है।"
नामित स्लॉट का उपयोग करना
नामित स्लॉट एकल स्लॉट के समान काम करते हैं, लेकिन इसके बजाय आप अपने बच्चे के घटक टेम्पलेट के भीतर विभिन्न क्षेत्रों में सामग्री वितरित करने की अनुमति देते हैं।
page घटक को पिछले उदाहरण से लें, लेकिन इसे संशोधित करें टेम्पलेट इस प्रकार है:
<html>
<head>
<title>Page Title</title>
</head>
<body>
<aside>
<slot name="sidebar"></slot>
</aside>
<main>
<slot name="content"></slot>
</main>
</body>
</html>
page घटक का उपयोग करते समय हम अब यह निर्धारित कर सकते हैं कि सामग्री को slot विशेषता के माध्यम से कहाँ रखा गया है:
<page>
<p slot="sidebar">This is sidebar content.</p>
<article slot="content"></article>
</page>
परिणामी पृष्ठ होगा:
<html>
<head>
<title>Page Title</title>
</head>
<body>
<aside>
<p>This is sidebar content.</p>
</aside>
<main>
<article></article>
</main>
</body>
</html>
एक तो slot एक बिना परिभाषित किया गया है name विशेषता है जो एक निर्दिष्ट नहीं घटक टैग भीतर रखा जाता है किसी भी सामग्री को तो slot विशेषता है कि स्लॉट में रखा जाएगा।
Vue.js आधिकारिक डॉक्स पर बहु प्रविष्टि उदाहरण देखें।
Vue JSX में 'babel-plugin-transform-vue-jsx' के साथ स्लॉट्स का उपयोग करना
यदि आप VueJS2 का उपयोग कर रहे हैं और इसके साथ JSX का उपयोग करना पसंद करते हैं। इस मामले में, स्लॉट का उपयोग करने के लिए, उदाहरण के साथ समाधान below.We उपयोग करने के लिए है this.$slots.default यह लगभग की तरह है this.props.children जे एस प्रतिक्रिया में।
घटक .js:
export default {
render(h) { //eslint-disable-line
return (
<li>
{ this.$slots.default }
</li>
);
}
};
ParentComponent.js
import Component from './Component';
export default {
render(h) { //eslint-disable-line
return (
<ul>
<Component>
Hello World
</Component>
</ul>
);
}
};