Vue घटक सहारा के लिए डिफ़ॉल्ट मान और अगर उपयोगकर्ता ने प्रोप को सेट नहीं किया है तो कैसे जांचें?

139

1. मैं Vue 2 में एक घटक प्रोप के लिए डिफ़ॉल्ट मान कैसे सेट कर सकता हूं? उदाहरण के लिए, एक सरल moviesघटक है जो इस तरह से इस्तेमाल किया जा सकता है:

<movies year="2016"><movies>



Vue.component('movies', {
    props: ['year'],

    template: '#movies-template',
    ...
}

लेकिन, यदि कोई उपयोगकर्ता निर्दिष्ट नहीं करता है year:

<movies></movies>

तब घटक yearप्रोप के लिए कुछ डिफ़ॉल्ट मान लेगा ।

2. इसके अलावा, यह जांचने का सबसे अच्छा तरीका क्या है कि किसी उपयोगकर्ता ने प्रोप को सेट नहीं किया है? क्या यह एक अच्छा तरीका है:

if (this.year != null) {
    // do something
}

या शायद यह:

if (!this.year) {
    // do something
}

?

javascript vue.js vue-component

— PeraMika
स्रोत

231

Vueआप एक डिफ़ॉल्ट propमान निर्दिष्ट करने के लिए अनुमति देता है और typeसीधे, एक वस्तु को सहारा देकर (देखें: https://vuejs.org/guide/compords.html#Prop-Validation ):

props: {
  year: {
    default: 2016,
    type: Number
  }
}

यदि गलत प्रकार पारित हो गया है, तो यह एक त्रुटि फेंकता है और इसे कंसोल में लॉग करता है, यहाँ फ़िडल है:

https://jsfiddle.net/cexbqe2q/

— craig_h
स्रोत

2

दूसरे प्रश्न के बारे में क्या है (यह अधिक जावास्क्रिप्ट प्रश्न है): अगर उपयोगकर्ता ने प्रस्ताव को निर्धारित नहीं किया है, तो यह जांचने का सबसे अच्छा तरीका क्या है? क्या यह एक अच्छा तरीका है: if (this.year != null) या शायद यह: if (!this.year)या? धन्यवाद!

— पेरामिका

1

यदि आप एक डिफ़ॉल्ट मान सेट करते हैं, तो जब तक आप डिफ़ॉल्ट को सेट नहीं करते, तब तक प्रोप हमेशा सेट रहेगा null। यदि ऐसा है तो आपको कुछ अन्य तर्क करने की ज़रूरत है if (this.year != null)या if (!this.year)जाने का तरीका है।

— craig_h

36

यह एक पुराना प्रश्न है, लेकिन प्रश्न के दूसरे भाग के बारे में - यदि उपयोगकर्ता ने कोई प्रस्ताव सेट नहीं किया है तो आप कैसे जांच सकते हैं?

thisघटक के भीतर निरीक्षण करना , हमारे पास हैthis.$options.propsData । यदि यहां प्रॉप मौजूद है, तो उपयोगकर्ता ने इसे स्पष्ट रूप से निर्धारित किया है; डिफ़ॉल्ट मान नहीं दिखाए गए हैं।

यह उन मामलों में उपयोगी है जहां आप वास्तव में अपने डिफ़ॉल्ट के लिए अपने मूल्य की तुलना नहीं कर सकते हैं, उदाहरण के लिए यदि प्रोप एक फ़ंक्शन है।

— aurumpotestasest
स्रोत