在 Vuejs 中跨不同组件共享数据 [英] Share data across different components in Vuejs

问题描述

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

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

var counter = Vue.extend({道具:['开始']，模板:'#counter',数据:函数(){返回 {值:this.start}},方法: {增量:函数(){this.value++},减量:函数(){this.value--}}});var 字母表 = Vue.extend({道具:['价值']，模板:'#alphabet',数据:函数(){返回 {值:0}}});新的 Vue({埃尔:'#app'，数据: {值:5},组件: {计数器:计数器，字母表:字母表}});

<script id="counter" type="text/template"><按钮@click="increment">+</button>{{ 价值 }}<按钮@click="递减">-</button></脚本><script id="alphabet" type="text/template">{{值}} </脚本><div id="app"><counter :start="val"></counter><字母 :value="val"></alphabet></div><script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/vue/1.0.17/vue.js"></script>

解决方案

您的设置方式存在 2 个问题.它在这里工作:https://jsfiddle.net/j9hua7c8/

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

var counter = Vue.extend({道具:['价值']，模板:'#counter',方法: {增量:函数(){this.value++}，减量:function() {this.value--}}});

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

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

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

Given the mini Vuejs app down below.

When I click one of my increment/decrement buttons, the value within the "counter" component updates but the value inside "alphabet" doesn't.
Any ideas on how can I share the same data across those two components so that they automatically update ?

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>

解决方案

There were 2 issues with the way you set it up. Here it is working: https://jsfiddle.net/j9hua7c8/

First issue was in the counter component, you created a new variable called value and it a value of this.start. This took the value of start and assigned it to value, but since value was a new variable it was no longer sync'd to start. Updated version:

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

Second thing is, in order to have a child variable sync two-ways, you need to use the .sync modifier on the binding. By default, they are only one-way bindings. Updated:

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

You can also use $dispatch and $broadcast to communicate between parent and child components if that is better for your use case.

这篇关于在 Vuejs 中跨不同组件共享数据的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！