vue.js

2015-11-09 25 views
14

में प्रोप को समझना मैं vue.js सीखने के लिए मार्गदर्शिका के माध्यम से काम कर रहा हूं, प्रोप पर अनुभाग में गया, और एक प्रश्न में भाग गया।vue.js

मैं समझता हूँ कि बच्चे घटक अलग Scops है और हम रंगमंच की सामग्री विन्यास का उपयोग माता पिता से इसे में डेटा पारित करने के लिए, लेकिन जब मैं इसे आज़माने मैं यह काम करने के लिए नहीं मिल सकता है।

मैं है the example I'm working on up on js fiddle:

var vm = new Vue({ 
    el: '#app', 
    // data from my parent that I want to pass to the child component 
    data:{ 
     greeting: 'hi' 
    }, 
    components:{ 
     'person-container':{ 

      // passing in the 'greeting' property from the parent to the child component 
      props:['greeting'], 

      // setting data locally for the child 
      data: function(){ 
       return { name: 'Chris' }; 
      }, 

      // using both local and parent data in the child's template 
      template: '<div> {{ greeting }}, {{ name }}</div>' 
     } 
    } 
}); 

जब मैं ऊपर कोड चलाने के लिए, मेरी उत्पादन केवल है: क्रिस

डेटा बच्चे घटक के लिए स्थानीय ठीक renders , लेकिन माता-पिता के डेटा में उत्तीर्ण या तो ठीक से प्रतिपादन नहीं कर रहा है या नहीं।

मैं JavaScript कंसोल में किसी भी त्रुटि नहीं दिख रहा है और टेम्पलेट प्रतिपादन किया गया है।

मैं गलत समझ रहा हूँ कैसे रंगमंच की सामग्री में पारित किया जाना चाहिए?

उत्तर

5

मैं नवीनीकृत किया है अपने fiddle

<person-container :greeting="greeting"></person-container> 

आपको एचटीएमएल घटक पर माता-पिता से बच्चे को प्रोप पास करने की आवश्यकता है।

1

बस इसे सामान्य html विशेषता की तरह निर्धारित करके "ग्रीटिंग" करने के लिए, वी-बाँध के निर्देश का उपयोग किए बिना आप किसी भी स्ट्रिंग पारित कर सकते हैं।

<person-container greeting="hi"></person-container> 

भी काम करेगा। ध्यान दें कि जिस तरह से आप पास करते हैं, उसे सादा स्ट्रिंग के रूप में व्याख्या किया जाएगा।

<person-container greeting="2 + 2"></person-container> 

परिणामस्वरूप "2 + 2, क्रिस" होगा। https://vuejs.org/v2/guide/components.html#Props

:
उपयोगकर्ता मार्गदर्शिका में अधिक