Vue.js 2 में प्रारंभिक डेटा के रूप में प्रोप को पास करने का सही तरीका क्या है?

Question

तो मैं एक वू घटक के लिए प्रोप पास करना चाहता हूं, लेकिन मुझे उम्मीद है कि भविष्य में इन प्रोपों को उस घटक के अंदर से बदलना होगा। जब मैं AJAX का उपयोग करके अंदर से वू घटक अद्यतन करता हूं। तो वे केवल घटक के प्रारंभ के लिए हैं।

मेरे cars-list Vue घटक तत्व जहाँ मैं single-car के लिए प्रारंभिक गुणों के साथ रंगमंच की सामग्री पारित:

// cars-list.vue 

<script> 
    export default { 
     data: function() { 
      return { 
       cars: [ 
        { 
         color: 'red', 
         maxSpeed: 200, 
        }, 
        { 
         color: 'blue', 
         maxSpeed: 195, 
        }, 
       ] 
      } 
     }, 
    } 
</script> 

<template> 
    <div> 
     <template v-for="car in cars"> 
      <single-car :initial-properties="car"></single-car> 
     </template> 
    </div> 
</template> 

तरह से मैं अभी यह है कि मेरे single-car घटक के अंदर मैं अपने this.data.properties पर created() प्रारंभ करने के लिए this.initialProperties बताए कर रहा हूँ कर हुक। और यह काम करता है और प्रतिक्रियाशील है।

// single-car.vue 

<script> 
    export default { 
     data: function() { 
      return { 
       properties: {}, 
      } 
     }, 
     created: function(){ 
      this.data.properties = this.initialProperties; 
     }, 
    } 
</script> 

<template> 
    <div>Car is in {{properties.color}} and has a max speed of {{properties.maxSpeed}}</div> 
</template> 

लेकिन मेरी समस्या यह है कि मुझे नहीं पता कि यह करने का सही तरीका है या नहीं? क्या इससे मुझे सड़क पर कुछ परेशानी नहीं होगी? या क्या ऐसा करने का एक बेहतर तरीका है?

Answer 1

इस https://github.com/vuejs/vuejs.org/pull/567 मैं अब जवाब जानने के लिए धन्यवाद परिभाषित करें।

विधि 1

सीधे डेटा के लिए प्रारंभिक प्रोप पास करें। अद्यतन डॉक्स में उदाहरण की तरह:

props: ['initialCounter'], 
data: function() { 
    return { 
     counter: this.initialCounter 
    } 
} 

लेकिन मन में है अगर पारित प्रोप एक वस्तु या सरणी कि माता-पिता घटक राज्य में प्रयोग किया जाता है कि प्रोप में कोई भी बदलाव कि माता-पिता घटक राज्य में परिवर्तन का परिणाम देगा है ।

विधि 2

अपने प्रारंभिक प्रोप एक वस्तु या सरणी और है, तो आप बच्चों में परिवर्तन राज्य जनक राज्य तक पहुंचने में तो बस जैसे का उपयोग नहीं करना चाहते हैं Vue.util.extend [1] रंगमंच की सामग्री की एक प्रति के बजाय बच्चों डेटा पर सीधे ओर इशारा करते हुए, इस तरह बनाने के लिए:

props: ['initialCounter'], 
data: function() { 
    return { 
     counter: Vue.util.extend({}, this.initialCounter) 
    } 
} 

फुटनोट

[1] को ध्यान में है यह एक आंतरिक Vue उपयोगिता है और यह बदल सकते हैं नए संस्करणों के साथ। आप उस प्रोप की प्रतिलिपि बनाने के लिए अन्य विधियों का उपयोग करना चाह सकते हैं, "How do I correctly clone a JavaScript object?" देखें।

मेरे बेला जहां मैं इसे परीक्षण किया गया था: https://jsfiddle.net/sm4kx7p9/3/

Answer 2

मेरा मानना ​​है कि आप इसे सही कर रहे हैं क्योंकि दस्तावेज़ों में यह कहा गया है।

एक स्थानीय डेटा संपत्ति अपनी प्रारंभिक मूल्य के रूप में प्रोप की प्रारंभिक मूल्य का उपयोग करता है

https://vuejs.org/guide/components.html#One-Way-Data-Flow