这似乎是一个相当基本的问题，但我似乎找不到一个明确的(甚至是有效的)答案.
我有我的根实例:
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次，但都没用.正确的方法是什么？请记住，我希望引用根目录中的数据，而不是创建具有自己作用域的副本.
编辑:试图使用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']
}