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

}

Answer 1

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

}

});

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

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

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

Answer 2

那是什么＆＃34;道具＆＃34;适用于：

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

我将一个对象/数组作为道具传递（你的events数据肯定会是什么），它会自动进行双向同步 - 更改子项中的事件，它们会在父项中更改

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

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

2 个答案: