Vue.js
रंगमंच की सामग्री
खोज…
टिप्पणियों
कैमलकेस <=> कबाब-केस
अपने props के नाम को परिभाषित करते समय, हमेशा याद रखें कि HTML विशेषता नाम केस-असंवेदनशील हैं। इसका मतलब है कि यदि आप अपने घटक परिभाषा में ऊंट मामले में एक prop को परिभाषित करते हैं ...
Vue.component('child', {
props: ['myProp'],
...
});
... आपको इसे अपने HTML घटक में मेरे-प्रोप के रूप में कॉल करना होगा।
माता-पिता से बच्चे को सहारा के साथ डेटा पास करना
Vue.js में, प्रत्येक घटक उदाहरण का अपना अलग-अलग दायरा होता है , जिसका अर्थ है कि यदि किसी मूल घटक में एक बच्चा घटक है - तो बच्चे के घटक का अपना अलग-अलग क्षेत्र है और मूल घटक का अपना अलग-अलग क्षेत्र है।
किसी भी माध्यम से बड़े आकार के ऐप के लिए, सर्वोत्तम प्रथाओं का पालन करना विकास के चरण के दौरान और फिर रखरखाव के दौरान बहुत सारे सिरदर्द को रोकता है। पालन करने के लिए ऐसी चीजों में से एक यह है कि बच्चे के घटक से सीधे माता-पिता के डेटा को संदर्भित / उत्परिवर्तित करने से बचें । तो फिर हम एक बच्चे के घटक के भीतर से माता-पिता के डेटा को कैसे देखें?
जो भी माता-पिता डेटा एक बच्चे घटक में आवश्यक है के रूप में बच्चे को पारित किया जाना चाहिए props माता पिता से।
केस का उपयोग करें : मान लें कि हमारे पास दो टेबल users साथ एक उपयोगकर्ता डेटाबेस है और निम्नलिखित क्षेत्रों के साथ addresses हैं:
users तालिका
| नाम | फ़ोन | ईमेल |
|---|---|---|
| जॉन मैक्लेन | (1) 234 5678 9012 | [email protected] |
| जेम्स बॉन्ड | (44) 777 0007 0077 | [email protected] |
addresses तालिका
| खंड मैथा | सड़क | Faridabad |
|---|---|---|
| नकटोमी टावर्स | ब्रॉडवे | न्यूयॉर्क |
| Mi6 हाउस | बकिंघम रोड | लंडन |
और हम अपने ऐप में कहीं भी संबंधित उपयोगकर्ता जानकारी प्रदर्शित करने के लिए तीन घटक रखना चाहते हैं
उपयोगकर्ता के component.js
export default{
template:`<div class="user-component">
<label for="name" class="form-control">Name: </label>
<input class="form-control input-sm" name="name" v-model="name">
<contact-details :phone="phone" :email="email"></contact-details>
</div>`,
data(){
return{
name:'',
phone:'',
email:''
}
},
}
संपर्क-details.js
import Address from './address';
export default{
template:`<div class="contact-details-component>
<h4>Contact Details:</h4>
<label for="phone" class="form-control">Phone: </label>
<input class="form-control input-sm" name="phone" v-model="phone">
<label for="email" class="form-control">Email: </label>
<input class="form-control input-sm" name="email" v-model="email">
<h4>Address:</h4>
<address :address-type="addressType"></address>
//see camelCase vs kebab-case explanation below
</div>`,
props:['phone', 'email'],
data:(){
return:{
addressType:'Office'
}
},
components:{Address}
}
address.js
export default{
template:`<div class="address-component">
<h6>{{addressType}}</h6>
<label for="block" class="form-control">Block: </label>
<input class="form-control input-sm" name="block" v-model="block">
<label for="street" class="form-control">Street: </label>
<input class="form-control input-sm" name="street" v-model="street">
<label for="city" class="form-control">City: </label>
<input class="form-control input-sm" name="city" v-model="city">
</div>`,
props:{
addressType:{
required:true,
type:String,
default:'Office'
},
data(){
return{
block:'',
street:'',
city:''
}
}
}
main.js
import Vue from 'vue';
Vue.component('user-component', require'./user-component');
Vue.component('contact-details', require'./contact-details');
new Vue({
el:'body'
});
index.html
...
<body>
<user-component></user-component>
...
</body>
हम phone और email डेटा प्रदर्शित कर रहे हैं, जो contact-details में user-component गुण हैं जिनके पास फोन या ईमेल डेटा नहीं है।
डेटा को प्रॉपर के रूप में पास करना
इसलिए टेम्प्लेट प्रॉपर्टी में user-component.js भीतर, जहां हम <contact-details> घटक शामिल करते हैं, हम फोन और ईमेल डेटा <user-component> (मूल घटक) से <contact-details> ( बच्चे घटक) गतिशील रूप से रंगमंच की सामग्री के लिए यह बाध्यकारी द्वारा - :phone="phone" और :email="email जो रूप में ही है v-bind:phone="phone" और v-bind:email="email"
प्रॉप्स - डायनेमिक बाइंडिंग
चूँकि हम गतिशील रूप से मूल घटक के भीतर फोन या ईमेल में किसी भी बदलाव को बाध्य कर रहे हैं अर्थात <user-component> तुरंत बच्चे के घटक यानी <contact-details> में परिलक्षित होगा।
सहारा - साहित्य के रूप में
हालाँकि, अगर हम फोन और ईमेल के मूल्यों को स्ट्रिंग शाब्दिक मानों जैसे phone="(44) 777 0007 0077" email="[email protected]" करेंगे, तो यह माता-पिता में होने वाले किसी भी डेटा परिवर्तन को प्रतिबिंबित नहीं करेगा। घटक।
वन-वे बाइंडिंग
डिफ़ॉल्ट रूप से परिवर्तनों की दिशा ऊपर से नीचे की ओर होती है अर्थात माता-पिता के घटक में गतिशील रूप से बंधे हुए प्रॉप्स में कोई भी परिवर्तन चाइल्ड घटक को प्रचारित करेगा, लेकिन चाइल्ड कंपोनेंट में प्रोप वैल्यू में कोई भी परिवर्तन अभिभावक को नहीं देगा।
उदाहरण के लिए: अगर भीतर से <contact-details> हम से ईमेल बदलने के [email protected] को [email protected] , माता पिता के डेटा में फोन डेटा संपत्ति यानी <user-component> अभी भी के एक मूल्य में शामिल होंगे [email protected] ।
हालांकि, अगर हम मूल घटक (हमारे उपयोग मामले में <user-component> में [email protected] [email protected] से [email protected] पर ईमेल के मूल्य को [email protected] तो बच्चे के घटक में ईमेल का मूल्य ( <contact-details> हमारे उपयोग के मामले में) [email protected] स्वचालित रूप से बदल जाएगा - माता-पिता में परिवर्तन तुरंत बच्चे को प्रचारित किया जाता है।
टू-वे बाइंडिंग
अगर हम टू-वे बाइंडिंग चाहते हैं तो हमें टू-वे बाइंडिंग को स्पष्ट रूप से निर्दिष्ट करना होगा जैसे :email.sync="email" बजाय :email="email" । अब अगर हम चाइल्ड कंपोनेंट में प्रोप के मूल्य को बदलते हैं, तो परिवर्तन मूल घटक में भी परिलक्षित होगा।
बच्चे के राज्य से बड़े माता-पिता को बदलने वाले मध्यम से बड़े राज्य में डिबगिंग करते समय विशेष रूप से पता लगाने और रखने के लिए बहुत कठिन होगा - सतर्क रहें ।
Vue.js 2.0 में कोई .sync विकल्प उपलब्ध नहीं होगा। प्रॉपर के लिए दो-तरफ़ा बाइंडिंग को Vue.js 2.0 में चित्रित किया जा रहा है ।
एक बार का बंधन
:email.once="email रूप में स्पष्ट एक बार के बंधन को परिभाषित करना भी संभव है :email.once="email , यह शाब्दिक पारित करने के लिए कम या ज्यादा समान है, क्योंकि मूल संपत्ति के मूल्य में किसी भी बाद के बदलाव बच्चे को प्रचारित नहीं करेंगे।
चेतावनी
जब ऑब्जेक्ट या एरे को प्रोप के रूप में पास किया जाता है, तो वे हमेशा से ही :email.sync="email" गए होते हैं, जिसका अर्थ है कि बाध्यकारी प्रकार के बावजूद स्पष्ट रूप से परिभाषित किया गया है :email.sync="email" या :email="email" या :email.once="email" । यदि ईमेल माता-पिता में एक ऑब्जेक्ट या एरे है, तो बाध्यकारी प्रकार की परवाह किए बिना, बच्चे के घटक के भीतर प्रोप मूल्य में कोई भी बदलाव माता-पिता में मूल्य को प्रभावित करेगा।
ऐरे के रूप में सहारा
contact-details.js फ़ाइल में हमने contact-details.js को परिभाषित props:['phone', 'email'] एक सरणी के रूप में, जो कि ठीक है अगर हम प्रॉम्प्स के साथ ठीक अनाज नियंत्रण नहीं चाहते हैं।
वस्तु के रूप में सहारा
यदि हम प्रॉप्स पर अधिक महीन दानेदार नियंत्रण चाहते हैं, जैसे
- यदि हम परिभाषित करना चाहते हैं कि किस प्रकार के मानों को प्रस्ताव के रूप में स्वीकार्य है
- प्रोप के लिए डिफ़ॉल्ट मान क्या होना चाहिए
- क्या मान के लिए कोई मान आवश्यक (आवश्यक) है या यह वैकल्पिक है
फिर हमें प्रॉपर परिभाषित करने के लिए ऑब्जेक्ट नोटेशन का उपयोग करने की आवश्यकता है, जैसा कि हमने address.js में किया है।
यदि हम पुन: प्रयोज्य घटकों को लिख रहे हैं जिनका उपयोग टीम के अन्य डेवलपर्स द्वारा भी किया जा सकता है, तो यह एक अच्छा अभ्यास है कि प्रॉप्स को वस्तुओं के रूप में परिभाषित किया जाए ताकि घटक का उपयोग करने वाले किसी को भी यह स्पष्ट पता चल सके कि डेटा का प्रकार क्या होना चाहिए और क्या यह अनिवार्य या वैकल्पिक है।
इसे प्रॉपर वेलिडेशन भी कहा जाता है। प्रकार निम्नलिखित देशी कंस्ट्रक्टर्स के किसी भी एक हो सकता है:
- तार
- संख्या
- बूलियन
- सरणी
- वस्तु
- समारोह
- या एक कस्टम कंस्ट्रक्टर
Http://vuejs.org/guide/compenders.html#Props से लिए गए प्रॉप वेरिफिकेशन के कुछ उदाहरण
Vue.component('example', {
props: {
// basic type check (`null` means accept any type)
propA: Number,
// multiple possible types (1.0.21+)
propM: [String, Number],
// a required string
propB: {
type: String,
required: true
},
// a number with default value
propC: {
type: Number,
default: 100
},
// object/array defaults should be returned from a
// factory function
propD: {
type: Object,
default: function () {
return { msg: 'hello' }
}
},
// indicate this prop expects a two-way binding. will
// raise a warning if binding type does not match.
propE: {
twoWay: true
},
// custom validator function
propF: {
validator: function (value) {
return value > 10
}
},
// coerce function (new in 1.0.12)
// cast the value before setting it on the component
propG: {
coerce: function (val) {
return val + '' // cast the value to string
}
},
propH: {
coerce: function (val) {
return JSON.parse(val) // cast the value to Object
}
}
}
});
कैमलकेस बनाम कबाब-केस
एचटीएमएल विशेषताओं केस-संवेदी होते हैं, जिसका मतलब है कि यह बीच अंतर नहीं कर सकते हैं addresstype और addressType गुण हम उनके कबाब-केस (हाइफन-प्रतिबंधित) समकक्ष उपयोग करने की आवश्यकता के रूप में है, इसलिए जब CamelCase प्रोप नाम का उपयोग:
addressType के रूप में लिखा जाना चाहिए address-type एचटीएमएल विशेषता में।
डायनेमिक प्रॉप्स
जैसे आप डेटा को मॉडल से देखने के लिए बाध्य करने में सक्षम होते हैं, वैसे ही आप माता-पिता से लेकर बच्चे के घटकों तक जानकारी भेजने के लिए समान वी-बाइंड निर्देश का उपयोग करके प्रॉपर बाइंड कर सकते हैं।
जे एस
new Vue({
el: '#example',
data: {
msg: 'hello world'
}
});
Vue.component('child', {
props: ['myMessage'],
template: '<span>{{ myMessage }}</span>
});
एचटीएमएल
<div id="example">
<input v-model="msg" />
<child v-bind:my-message="msg"></child>
<!-- Shorthand ... <child :my-message="msg"></child> -->
</div>
परिणाम
hello world
Vue JSX का उपयोग करते हुए पासिंग प्रॉप्स
हमारे पास एक मूल घटक है: इसमें एक बच्चे के घटक को आयात करते हुए हम एक विशेषता के माध्यम से सहारा पास करेंगे। यहाँ विशेषता 'src' है और हम 'src' भी पास कर रहे हैं।
ParentComponent.js
import ChildComponent from './ChildComponent';
export default {
render(h, {props}) {
const src = 'https://cdn-images-1.medium.com/max/800/1*AxRXW2j8qmGJixIYg7n6uw.jpeg';
return (
<ChildComponent src={src} />
);
}
};
और एक बच्चा घटक, जहां हमें प्रॉपर पास करने की आवश्यकता होती है। हमें यह निर्दिष्ट करने की आवश्यकता है कि हम किस प्रॉपर से गुजर रहे हैं।
ChildComponent.js:
export default {
props: ['src'],
render(h, {props}) {
return (
<a href = {props.src} download = "myimage" >
Click this link
</a>
);
}
};