Vue.js-从组件内的根实例访问数据 [英] Vue.js - access data from root instance within component

问题描述

这似乎是一个非常基本的问题，但我似乎找不到一个确定的(甚至是可行的)答案.

This seems like a fairly basic question but I can't seem to find a definitive (or even working) answer.

我有我的根实例:

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.$ root.events 无济于事.解决这个问题的正确方法是什么?请记住，我要从根引用数据，而不是创建具有自己作用域的副本.

This doesn't seem to work. I have also tried this.$root.events to 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.

尝试使用道具，这是列表组件，它也不起作用:

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

}

推荐答案

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

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 EventList together, I'm going to assume you registered it as a global component.

文档指出:

请注意，如果要传递的prop是对象或数组，则会通过引用传递它.不管您使用的绑定类型是什么，在子对象内部对对象或数组本身进行突变都会影响父状态.

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.

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

So you will be using the same object throughout all your components when you pass it as a 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:

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 的属性传递:

In the root vue instance template, you can pass the root vue instances events as a property called events in the child component:

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

这篇关于Vue.js-从组件内的根实例访问数据的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！