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 безрезультатно. Каков правильный способ этого? Имейте в виду, что я хочу ссылаться на данные из корня, а не создавать копию с ее собственной областью.

EDIT: пытаясь использовать реквизит, вот компонент списка, который также не работает:

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:

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

В шаблоне экземпляра корневого вю, вы можете передать экземпляры корня VUE events как свойство называется events в детском компоненте:

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

Answer 2

Вот что такое "Реквизит" предназначены для:

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

Я вам пройти объект/массив в качестве опоры (что, безусловно, будет иметь ваши данные events), это двухсторонняя синхронизация автоматически - изменение событий в дочернем элементе, они изменяются в родительском.

Если вы передаете простые значения (строки, число - например, только event.name) через реквизит, вы должны явно использовать .sync модификатора: http://vuejs.org/guide/components.html#Prop_Binding_Types