這似乎是一個相當基本的問題,但我似乎無法找到一個明確的(或甚至是工作)的答案。Vue.js - 從組件中的根實例訪問數據
我有我的根實例:
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
無濟於事。什麼是正確的方式去做這件事?請記住,我想從根引用數據,而不是使用自己的作用域創建副本。
編輯:嘗試使用道具,這裏是列表組件,這也是不工作:
var EventsList = Vue.extend({
template: '<ul><li v-for="event in events"><h2>{{ event.title }}</h2><p>{{ event.body }}</p></li></ul>',
props: ['events']
}
確定你不想使用與道具的雙向同步?這樣,你就不必緊密結合這兩個組件。 – nils
對不起,我對此很新。你能解釋一下你的意思嗎?我把這些事件放在根實例中,因爲我希望將它們用在許多組件中。 – Chris
這些組件是否會更改「事件」,還是隻讀?我會在一秒內解釋。 – nils