Vue.js - accesso ai dati dall'istanza root all'interno del componente

Question

Questa sembra una domanda abbastanza semplice ma non riesco a trovare una risposta definitiva (o addirittura funzionante).

ho il mio esempio root:

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(); 

} 

}); 

e ho un componente separato in cui voglio elencare gli eventi memorizzati nell'istanza radice. Al momento appare così:

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(); 
} 
} 

Questo non sembra funzionare. Ho anche provato this.$root.events senza alcun risultato. Qual è il modo corretto di fare questo? Tieni presente che voglio fare riferimento ai dati dalla radice, non creare una copia con un proprio ambito.

EDIT: cercando di utilizzare oggetti di scena, qui è la componente di lista, che è anche non funziona:

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, si può facilmente passare gli stessi dati dai genitori ai figli . Poiché non so come hai collegato l'istanza di root e lo EventList insieme, assumerò che tu l'abbia registrato come componente globale.

La documentazione:

noti che se l'elica essendo tramandata è un oggetto o un array, viene passato per riferimento. La mutazione dell'oggetto o della matrice stessa all'interno del bambino influenzerà lo stato genitore, indipendentemente dal tipo di bind utilizzato.

Quindi si utilizzerà lo stesso oggetto in tutti i componenti quando lo si passa come sostegno.

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:

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 { 
    } 
}, 
props: { 
    events: Object, // assuming that your prop is an object 
}, 
} 

// Register the vue component globally, if you want to: 
Vue.component('eventlist', EventsList); 

Nel modello di istanza radice vue, è possibile passare le istanze radice vue events come una proprietà chiamata events nella componente figlio:

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

Answer 2

Questo è quello che "Props" sono per:

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

mi si passa un oggetto/array come supporto (quali saranno sicuramente i tuoi dati events), è la sincronizzazione a due vie automaticamente - cambia gli eventi nel bambino, vengono modificati nel genitore.

Se si passa valori semplici (stringhe, numeri - ad esempio solo event.name) via oggetti di scena, si deve utilizzare in modo esplicito il .sync modificatore: http://vuejs.org/guide/components.html#Prop_Binding_Types