Model 在Vuejs中的不同组件之间共享数据

考虑到下面的迷你Vuejs应用程序

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

var counter=Vue.extend({
道具：[“开始”]，
模板：“#计数器”，
数据：函数（）{
返回{
value:this.start
}
},
方法：{
增量：函数（）{
这就是价值++
},
减量：函数（）{
这就是价值--
}
}
});
var alphabet=Vue.extend({
道具：['value']，
模板：“#字母表”，
数据：函数（）{
返回{
数值：0
}
}
});
新Vue({
el:“#应用程序”，
数据：{
瓦尔：5
},
组成部分：{
柜台:柜台,，
字母表
}
});

+{{value}}
-
{{value}}
您有两个选择

1手动同步您的值
在
递增
和
递减
函数中添加以下语句

this.$parent.val = this.value;

并使您的字母表值等于父val

computed: {
    value: function() {
        return this.$parent.val;
    }
  }

导致

2用于保持数据的全局状态
使用
vuex
可以
存储所有组件的通用
状态。此状态将是被动的，因此当您更改其值时，每个组件的状态都将更新。对于您的用例来说，这可能是一种过分的杀伤力，但必须记住，设置它的方式有两个问题。这就是它的工作原理：

第一个问题是在
计数器
组件中，您创建了一个名为
值
的新变量，该变量的值为
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>



如果更适合您的用例，您还可以使用和在父组件和子组件之间进行通信。
如前所述，您可以使用vuex。但是，您不必使用vuex。Vuex只是帮助强制执行如何使用全球国家的惯例，并试图让人们很难做错事

然而，只要有一点自律，你自己就可以轻松做到。只需创建全局对象，并将其传递给数据函数中的所有组件。
我花了很长时间才得出结论，我需要让组件彼此对话。所以我向大家推荐，现在就开始学习VueX，这样你就不会浪费时间了。您的同事会欣赏代码标准，并将VueX视为首选方法。我承认，今天我通读了VueX网站文档的每一页，但仍然缺乏一个有效的示例。但是，我确实在前面找到了该页面，我将在使用Vue转换到Typescript时自己实现它，就像我喜欢的那样

我最初在JavaScript中使用Vue组件代码，例如
this.$children
或
this.$parent.$children
，在组件之间循环，以获取组件数据，并调用其他组件上的方法，以设置页面状态，说明我需要什么。我会说这是一个肮脏的方法，但如果你需要一些快速的东西，它是有效的。我说它很脏，因为所有Vue组件都有一个隔离的作用域。我创建的用于从组件外部访问数据的方法，仅用于从组件本身内部或从VueJS的角度从组件的模板访问。然而，JavaScript允许我不受惩罚，因为我知道DOM的结构。如果你所看到的一切都不走运，并且你在一个项目中工作了几天，并且迫切需要一些东西；下面是我所指的一个工作示例：（肮脏的方法）[

如果您使用
脏方法
，例如冲浪
this.$children
或
this.$parent.$children
；请稍后重构您的应用程序并切换到
VueX
。我正在使用此
单元测试驱动程序
组件“为我”填写表单元素，这样我可以更快地构建应用程序，同时进行测试。我从Word/Excel复制和粘贴数据，需要动态添加新的表单组件，然后用数据填充这些组件，并将
漂亮的XML
生成到剪贴板。当我第一次编写
时学习Vue组件时，我遇到了很多错误y方法
code。能够进行测试变得非常复杂，我从另一个文档中复制和粘贴了太多内容，这就是为什么我创建了
单元测试驱动程序
组件来加快我的开发。从那以后，我将所有这些都转换为基于类型脚本的项目trong>，并且由于
这个、
、
这个、
，以及Vue的独立组件范围，导致了一个中断的
单元测试驱动程序
实现。我希望我刚刚了解VueX的startout，在写这一切的过程中，希望我能为其他人节省宝贵的时间

在将我的应用程序转换到TypeScript之后，我才意识到
这一点。$parent
或
这一点。$children
成员对
type saftey
玩得不太好，因此我的应用程序被破坏了，我无法轻松地从DOM元素转换到
TypeScript
组件。我不喜欢使用type<代码>（检查
--strictNullChecks
）