model - 在 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 是一个新变量，它不再同步到 >开始。更新版本:

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

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

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

您还可以使用 $dispatch和 $broadcast如果这更适合您的用例，则在父组件和子组件之间进行通信。