在Vuejs中跨不同组件共享数据

Question

鉴于下面的迷你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>
<script id="alphabet" type="text/template"> {{ value }} </script>
<div id="app">
  <counter :start="val"></counter>
  <alphabet :value="val"></alphabet>
</div>
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/vue/1.0.17/vue.js"></script>

Answer 1

你设置它的方式有2个问题.这是工作:https://jsfiddle.net/j9hua7c8/

第一个问题是在counter组件中,您创建了一个名为的新变量value,它的值为this.start.这取了start它的值并将其分配给value,但由于它value是一个新的变量,它不再同步start.更新后的版本:

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

第二件事是,为了让子变量同步双向,你需要.sync在绑定上使用修饰符.默认情况下,它们只是单向绑定.更新:

<counter :value.sync="val"></counter>

如果对您的用例更好,您还可以使用$ dispatch和$ broadcast在父组件和子组件之间进行通信.