相关疑难解决方法(0)

这似乎是一个相当基本的问题,但我似乎找不到一个明确的(甚至是工作的)答案.

我有我的根实例:

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 …

鉴于下面的迷你Vuejs应用程序.

当我单击其中一个增量/减量按钮时,"计数器"组件中的值会更新,但"字母"中的值不会更新.
关于如何在这两个组件之间共享相同数据以便它们自动更新的任何想法？

var counter = Vue.extend({
    props: ['start'],
    template: '#counter',
    data: function() {
      return {
        value: this.start
      }
    },
    methods: {
      increment: function() {
        this.value++
      },
      decrement: function() {
        this.value--
      }
    }
  });

  var alphabet = Vue.extend({
    props: ['value'],
    template: '#alphabet',
    data: function() {
      return {
        value: 0
      }
    }
  });

  new Vue({
    el: '#app',
    data: {
      val: 5
    },
    components: {
      counter: counter,
      alphabet: alphabet
    }
  });

<script id="counter" type="text/template">
  <button @click="increment">+</button> {{ value }}
  <button @click="decrement">-</button>
</script> …