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無濟於事。 go 的正確方法是什么？ 請記住，我想從根目錄中引用數據，而不是用它自己的 scope 創建一個副本。

編輯：嘗試使用道具，這里是列表組件，它也不起作用：

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

使用props ，您可以輕松地將相同的數據從父級傳遞給子級。 由於我不知道您如何將根實例和EventList在一起，因此我假設您將其注冊為全局組件。

該文件指出：

請注意，如果傳遞的 prop 是對象或數組，則它是通過引用傳遞的。 無論您使用哪種綁定類型，在子對象內部改變對象或數組本身都會影響父狀態。

因此，當您將其作為 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();

}

});

活動列表：

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>

Answer 2

這就是“道具”的用途：

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

如果您將對象/數組作為道具傳遞（您的events數據肯定會是什么），它會自動進行雙向同步 - 在子級中更改事件，在父級中更改它們。

如果您通過道具傳遞簡單的值（字符串、數字 - 例如只有 event.name），您必須明確使用.sync修飾符： http : .sync

Answer 3

this.$root.events

這將引用根組件，“即 main.js 或 index.js 或 app.js”，無論您在哪個組件中，使用 props 都需要將它傳遞給每個組件，假設您想在第三個組件中使用它子組件。