Vue.js - 从组件内的根实例访问数据

Question

这似乎是一个相当基本的问题，但我似乎找不到明确的（甚至是有效的）答案。

我有我的根实例：

 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']

}

原文由 Chris 发布，翻译遵循 CC BY-SA 4.0 许可协议

Answer 1

使用 props ，您可以轻松地将相同的数据从父级传递给子级。由于我不知道您如何将根实例和 EventList 链接在一起，因此我假设您将其注册为全局组件。

该文档指出：

请注意，如果传递的 prop 是 Object 或 Array，则它是通过引用传递的。无论您使用何种绑定类型，在子级内部改变对象或数组本身都会影响父级状态。

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

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

在根 vue 实例模板中，您可以将根 vue 实例 events 作为名为 events 的属性传递给子组件：

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

原文由 nils 发布，翻译遵循 CC BY-SA 3.0 许可协议

Answer 2

这就是“道具”的用途：

http://vuejs.org/guide/components.html#Props

如果您将对象/数组作为道具传递（您的 events 数据肯定会是），它会自动进行双向同步 - 更改子事件中的事件，它们在父事件中更改。

如果您通过 props 传递简单值（字符串、数字 - 例如仅 event.name），则必须明确使用 .sync 修饰符：http: //vuejs.org/guide/components.html#Prop_Binding_Types

原文由 Linus Borg 发布，翻译遵循 CC BY-SA 4.0 许可协议