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

问题描述

这似乎是一个相当基本的问题，但我似乎无法找到明确(甚至可行)的答案.

我有我的根实例:

var vm = new Vue({el: '#app',//数据数据: {事件:{}},//方法方法: {fetchEvents:函数(){this.$http.get('/api/events').success(function(theseEvents) {this.$set('events', theseEvents);}).错误(函数(错误){});}},准备好:函数(){this.fetchEvents();}});

我有一个单独的组件，我想在其中列出存储在根实例中的事件.目前它看起来像这样:

var EventsList = Vue.extend({模板:'<ul><li v-for="event in events"><h2>{{ event.title }}</h2><p>{{ event.body }}</p></li></ul>'，数据:函数(){返回 {事件:{}}},方法: {同步事件:函数(){this.$set('events', this.$parent.events);}},//当准备好...准备好:函数(){this.syncEvents();}}

这似乎不起作用.我也试过 this.$root.events 无济于事.解决这个问题的正确方法是什么?请记住，我想从根引用数据，而不是创建具有自己范围的副本.

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

var EventsList = Vue.extend({模板:'<ul><li v-for="event in events"><h2>{{ event.title }}</h2><p>{{ event.body }}</p></li></ul>'，道具:['事件']}

解决方案

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

文档说明:

<块引用>

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

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

var vm = new Vue({el: '#app',//数据数据: {事件:{}},//方法方法: {fetchEvents:函数(){this.$http.get('/api/events').success(function(theseEvents) {this.$data.events = 这些事件；//这里不需要使用 $set}).错误(函数(错误){});}},准备好:函数(){this.fetchEvents();}});

事件列表:

var EventsList = Vue.extend({模板:'<ul><li v-for="event in events"><h2>{{ event.title }}</h2><p>{{ event.body }}</p></li></ul>'，数据:函数(){返回 {}},道具: {events: Object,//假设你的道具是一个对象},}//全局注册 vue 组件，如果你想:Vue.component('eventlist', EventsList);

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

<!-- 使用 :events 属性传递事件 --><事件列表:事件=事件"></事件列表>

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.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.

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

}

解决方案

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.

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.

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:

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 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屋！