Vue.js - घटक

Question

के भीतर मूल उदाहरण से डेटा तक पहुंच यह एक काफी बुनियादी सवाल जैसा प्रतीत होता है लेकिन मुझे एक निश्चित (या यहां तक ​​कि काम करने वाला) जवाब नहीं दिख रहा है।

मैं अपने रूट उदाहरण है:

var vm = new Vue({ 
    el: '#app', 

    // Data 
    data: { 
     events: {} 
    }, 

    // Methods 
    methods: { 

    fetchEvents: function(){ 
     this.$http.get('/api/events').success(function(theseEvents) { 
     this.$set('events', theseEvents); 

     }).error(function(error) { 

     }); 

    } 
}, 

ready: function(){ 

    this.fetchEvents(); 

} 

}); 

और मैं एक अलग घटक जिसमें मैं घटनाओं जड़ उदाहरण में जमा हो जाती है बाहर की सूची बनाना चाहते है। फिलहाल ऐसा लगता है:

var EventsList = Vue.extend({ 

template: '<ul><li v-for="event in events"><h2>{{ event.title }}</h2><p>{{ event.body }}</p></li></ul>', 

data: function(){ 
    return { 
    events: {} 
    } 
}, 

methods: { 

    syncEvents: function(){ 
    this.$set('events', this.$parent.events); 
    } 

}, 

// When ready... 
ready: function(){ 
    this.syncEvents(); 
} 
} 

यह काम नहीं प्रतीत होता है। मैंने this.$root.events का कोई फायदा नहीं लिया है। इस बारे में जाने का सही तरीका क्या है? ध्यान रखें कि मैं रूट से डेटा का संदर्भ देना चाहता हूं, अपनी प्रतिलिपि के साथ प्रतिलिपि नहीं बनाऊंगा।

संपादित करें:

http://vuejs.org/guide/components.html#Props

मैं तुम्हें पारित: के लिए

var EventsList = Vue.extend({ 

template: '<ul><li v-for="event in events"><h2>{{ event.title }}</h2><p>{{ event.body }}</p></li></ul>', 

props: ['events'] 

} 

Answer 1

Using props, आप आसानी से एक ही डेटा माता-पिता से बच्चों को पारित कर सकते हैं । चूंकि मुझे नहीं पता कि आपने मूल उदाहरण और EventList को एक साथ कैसे जोड़ा है, मैं मानता हूं कि आपने इसे वैश्विक घटक के रूप में पंजीकृत किया है।

प्रलेखन राज्यों:

ध्यान दें कि एक वस्तु या किसी सरणी है अगर प्रोप नीचे पारित किया जा रहा है, यह संदर्भ द्वारा पारित कर दिया है। आप जिस बाध्यकारी प्रकार का उपयोग कर रहे हैं, उसके बावजूद बच्चे के अंदर ऑब्जेक्ट या ऐरे को स्वयं को म्यूट करना मूल स्थिति को प्रभावित करेगा।

तो जब आप इसे प्रोप के रूप में पास करते हैं तो आप अपने सभी घटकों में उसी ऑब्जेक्ट का उपयोग करेंगे।

var vm = new Vue({ 
    el: '#app', 

    // Data 
    data: { 
     events: {} 
    }, 

    // Methods 
    methods: { 

    fetchEvents: function(){ 
     this.$http.get('/api/events').success(function(theseEvents) { 
     this.$data.events = theseEvents; // You don't need to use $set here 

     }).error(function(error) { 

     }); 

    } 
}, 

ready: function(){ 

    this.fetchEvents(); 

} 

}); 

EventList:

<div class="app"> 
    <!-- events is passed using the :events prop --> 
    <eventlist :events="events"> 
    </eventlist> 
</div> 

Answer 2

है यही कारण है कि "प्रॉप्स" कर रहे हैं: रंगमंच की सामग्री का उपयोग करने की कोशिश कर, यहाँ सूची घटक है, जो भी है काम नहीं कर रहा है एक ऑब्जेक्ट/सरणी प्रोप के रूप में (आपका events डेटा निश्चित रूप से होगा), यह स्वचालित रूप से दो-तरफा सिंक हो रहा है - बच्चे में ईवेंट बदलें, वे माता-पिता में बदल दिए जाते हैं।

आप सरल मूल्यों (स्ट्रिंग, संख्याओं - जैसे ही event.name) पार कर लेते हैं रंगमंच की सामग्री के माध्यम से, आप स्पष्ट रूप से .sync संशोधक का उपयोग करने के लिए है: http://vuejs.org/guide/components.html#Prop_Binding_Types