Javascript Vue.js - 从组件内的根实例访问数据
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/35723595/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Vue.js - access data from root instance within component
提问by Chris
This seems like a fairly basic question but I can't seem to find a definitive (or even working) answer.
这似乎是一个相当基本的问题，但我似乎找不到明确的（甚至可行的）答案。
I have my root instance:
我有我的根实例：
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();
}
});
And I have a separate component in which I want to list out the events that are stored in the root instance. At the moment it looks like this:
我有一个单独的组件，我想在其中列出存储在根实例中的事件。目前它看起来像这样：
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 doesn't seem to work. I have also tried this.$root.eventsto no avail. What is the correct way to go about this? Bear in mind I want to reference the data from the root, not create a copy with its own scope.
这似乎不起作用。我也试过this.$root.events无济于事。解决这个问题的正确方法是什么？请记住，我想从根引用数据，而不是创建具有自己范围的副本。
EDIT: trying to use props, here is the list component, which is also not working:
编辑：尝试使用道具，这里是列表组件，它也不起作用：
var EventsList = Vue.extend({
template: '<ul><li v-for="event in events"><h2>{{ event.title }}</h2><p>{{ event.body }}</p></li></ul>',
props: ['events']
}
采纳答案by nils
Using props, you can easily pass the same data from parent to children. Since I don't know how you linked the root instance and the EventListtogether, I'm going to assume you registered it as a global component.
使用props，您可以轻松地将相同的数据从父级传递给子级。由于我不知道您如何将根实例和 链接EventList在一起，因此我假设您将其注册为全局组件。
The documentation states:
该文件指出：
Note that if the prop being passed down is an Object or an Array, it is passed by reference. Mutating the Object or Array itself inside the child will affect parent state, regardless of the binding type you are using.
请注意，如果传递的 prop 是对象或数组，则它是通过引用传递的。无论您使用哪种绑定类型，在子对象内部改变对象或数组本身都会影响父状态。
So you will be using the same object throughout all your components when you pass it as a prop.
因此，当您将其作为 prop 传递时，您将在所有组件中使用相同的对象。
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);
In the root vue instance template, you can pass the root vue instances eventsas a property called eventsin the child component:
在根 vue 实例模板中，您可以将根 vue 实例events作为events在子组件中调用的属性传递：
<div class="app">
<!-- events is passed using the :events prop -->
<eventlist :events="events">
</eventlist>
</div>
回答by Linus Borg
That's what "Props" are for:
这就是“道具”的用途：
http://vuejs.org/guide/components.html#Props
http://vuejs.org/guide/components.html#Props
If you pass an object/array as a prop (what your eventsdata will surely be), it's two-way syncing automatically - change events in the child, they are changed in the parent.
如果您将对象/数组作为道具传递（您的events数据肯定会是什么），它会自动进行双向同步 - 在子级中更改事件，在父级中更改它们。
If you pass simple values (strings, numbers - e.g. only event.name) via props, you have to explicitly use the .syncmodifier: http://vuejs.org/guide/components.html#Prop_Binding_Types
如果你通过道具传递简单的值（字符串、数字——例如只有 event.name），你必须明确使用.sync修饰符：http: //vuejs.org/guide/components.html#Prop_Binding_Types
