Vue.js
गतिशील घटक
खोज…
टिप्पणियों
<component>
एक आरक्षित घटक तत्व है, घटक उदाहरण से भ्रमित न हों।
v-bind
एक निर्देश है। निर्देश वी के साथ उपसर्ग कर रहे हैं - यह इंगित करने के लिए कि वे वीयू द्वारा प्रदान किए गए विशेष गुण हैं।
सरल गतिशील घटक उदाहरण
गतिशील रूप से कई beetween स्विच घटकों का उपयोग कर <component>
तत्व और वी-बाँध को डेटा पास: विशेषता है:
जावास्क्रिप्ट:
new Vue({
el: '#app',
data: {
currentPage: 'home'
},
components: {
home: {
template: "<p>Home</p>"
},
about: {
template: "<p>About</p>"
},
contact: {
template: "<p>Contact</p>"
}
}
})
HTML:
<div id="app">
<component v-bind:is="currentPage">
<!-- component changes when currentPage changes! -->
<!-- output: Home -->
</component>
</div>
स्निपेट:
पेज नेविगेशन जिंदा रखने के साथ
कभी-कभी आप स्विच्ड-आउट घटकों को स्मृति में रखना चाहते हैं, ऐसा करने के लिए, आपको <keep-alive>
तत्व का उपयोग करना चाहिए:
जावास्क्रिप्ट:
new Vue({
el: '#app',
data: {
currentPage: 'home',
},
methods: {
switchTo: function(page) {
this.currentPage = page;
}
},
components: {
home: {
template: `<div>
<h2>Home</h2>
<p>{{ homeData }}</p>
</div>`,
data: function() {
return {
homeData: 'My about data'
}
}
},
about: {
template: `<div>
<h2>About</h2>
<p>{{ aboutData }}</p>
</div>`,
data: function() {
return {
aboutData: 'My about data'
}
}
},
contact: {
template: `<div>
<h2>Contact</h2>
<form method="POST" @submit.prevent>
<label>Your Name:</label>
<input type="text" v-model="contactData.name" >
<label>You message: </label>
<textarea v-model="contactData.message"></textarea>
<button type="submit">Send</button>
</form>
</div>`,
data: function() {
return {
contactData: { name:'', message:'' }
}
}
}
}
})
HTML:
<div id="app">
<div class="navigation">
<ul>
<li><a href="#home" @click="switchTo('home')">Home</a></li>
<li><a href="#about" @click="switchTo('about')">About</a></li>
<li><a href="#contact" @click="switchTo('contact')">Contact</a></li>
</ul>
</div>
<div class="pages">
<keep-alive>
<component :is="currentPage"></component>
</keep-alive>
</div>
</div>
सीएसएस:
.navigation {
margin: 10px 0;
}
.navigation ul {
margin: 0;
padding: 0;
}
.navigation ul li {
display: inline-block;
margin-right: 20px;
}
input, label, button {
display: block
}
input, textarea {
margin-bottom: 10px;
}
स्निपेट:
Modified text is an extract of the original Stack Overflow Documentation
के तहत लाइसेंस प्राप्त है CC BY-SA 3.0
से संबद्ध नहीं है Stack Overflow