Vue.js - Zugangsdaten von der root-Instanz innerhalb der Komponente

Question

Das scheint eine ziemlich grundlegende Frage zu sein, aber ich kann keine definitive (oder sogar funktionierende) Antwort finden.

Ich habe meine Rootinstanz:

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

} 

}); 

Und ich habe eine separate Komponente, in dem ich die Ereignisse auflisten wollen, die in der Stamminstanz gespeichert werden. Im Moment sieht es so aus:

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

Dies scheint nicht zu funktionieren. Ich habe auch this.$root.events vergeblich versucht. Was ist der richtige Weg? Bedenken Sie, dass ich die Daten von der Wurzel referenzieren möchte, nicht eine Kopie mit einem eigenen Umfang erstellen.

EDIT: versuchen, Requisiten zu verwenden, hier ist die Liste Komponente, die auch nicht funktioniert:

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, können Sie einfach die gleichen Daten von den Eltern übergeben, um Kinder . Da ich nicht weiß, wie Sie die Root-Instanz und die EventList miteinander verbunden haben, werde ich davon ausgehen, dass Sie es als eine globale Komponente registriert haben.

In der Dokumentation:

Beachten Sie, dass, wenn die Stütze weitergegeben wird, ist ein Objekt oder ein Array, wird als Referenz übergeben. Das Mutieren des Objekts oder Arrays selbst innerhalb des untergeordneten Elements wirkt sich auf den übergeordneten Status aus, unabhängig vom verwendeten Bindungstyp.

Sie werden also das gleiche Objekt in allen Ihren Komponenten verwenden, wenn Sie es als Prop übergeben.

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

} 

}); 

Event:

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

im Stamm vue Instanzvorlage, können Sie die Wurzel vue Instanzen passieren events als Eigenschaft events in der Kindkomponente genannt:

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

Answer 2

das, was "Props" ist für:

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

ich dir passieren ein Objekt/Array als Prop (was Ihre events Daten werden sicherlich), es ist zwei-Wege-Synchronisierung automatisch - Ereignisse im Kind ändern, sie sind in der übergeordneten geändert.

Wenn Sie einfache Werte übergeben (Strings, Zahlen - zB nur event.name) über Requisiten, haben Sie die .sync Modifikator explizit verwenden: http://vuejs.org/guide/components.html#Prop_Binding_Types