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，但没有效果。正确的做法是什么呢？请记住，我希望引用根目录中的数据，而不是创建具有自己作用域的副本。
编辑:尝试使用道具，下面是list组件，它也不起作用：
var EventsList = Vue.extend({
template: '<ul><li v-for="event in events"><h2>{{ event.title }}</h2><p>{{ event.body }}</p></li></ul>',
props: ['events']
}回答 2
Stack Overflow用户
发布于 2016-03-01 21:24:39
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实例模板中，您可以在子组件中将根vue实例events作为名为events的属性进行传递：
<div class="app">
<!-- events is passed using the :events prop -->
<eventlist :events="events">
</eventlist>
</div>Stack Overflow用户
发布于 2016-03-01 21:11:35
这就是“道具”的用处：
http://vuejs.org/guide/components.html#Props
如果你将一个对象/数组作为一个道具传递(你的events数据肯定是这样的)，它是双向自动同步的--在子元素中改变事件，它们在父元素中被改变。
如果通过props传递简单的值(字符串、数字-例如仅event.name)，则必须显式使用.sync修饰符：http://vuejs.org/guide/components.html#Prop_Binding_Types
https://stackoverflow.com/questions/35723595
复制相似问题
腾讯云开发者
