Javascript 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();
}
}

这就是“道具”的用途：

如果您将对象/数组作为道具传递（您的

事件

数据肯定会是什么），它是双向自动同步-在子级中更改事件，在父级中更改事件

如果您通过道具传递简单值（字符串、数字-例如仅事件.name），则必须显式使用

.sync

修饰符：

，您可以轻松地将相同的数据从父级传递给子级。因为我不知道您是如何将根实例和

事件列表链接在一起的，所以我假设您将其注册为全局组件

文件规定：

请注意，如果要传递的道具是对象或数组，则它是通过引用传递的。在子对象中改变对象或数组本身将影响父状态，而不管您使用的绑定类型如何

因此，当您将同一对象作为道具传递时，它将在所有组件中使用

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

}

});

事件列表：

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

你确定不想使用道具的双向同步吗？这样，您就不必将这两个组件紧密地结合在一起。对不起，我对这一点还不太熟悉。你能解释一下你的意思吗？我将事件放在根实例中，因为我希望在许多组件中使用它们。这些组件会同时更改
事件还是只读？我马上解释。它们应该只是一个直接的参考，所以它们可以改变。好的，我刚刚读了一些关于道具的书。似乎我只需要将道具：['events']添加到eventList组件中，模板才能工作？它不起作用…请确保您将组件全局注册为@nils指示的值，并确保将：events prop传递给声明它的子级
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);

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