vue.js - 父母和孩子可以听同一个事件并将数据合并在一起 - Vue吗？

Question

如果我在父类中有一个按钮，并且子类存储某些数据。父类也存储不同的数据。

当我们点击父类的按钮时，有没有可能让子类监听到这个事件，然后把这个数据传给父类，然后父类也抓取自己的数据，把这些数据合并到一起呢？

他们如何才能同时监听同一个按钮事件，然后检索数据并将数据传递给彼此？数据也需要通过另一个函数来格式化/更改值，而不仅仅是显示这些数据。

这是否可能以及如何，因为此按钮似乎影响两个组件并且数据被传递？

谢谢！

标签： vue.jsbuttonvuejs2vue-componentparent-child

Answer 1

孩子们无法捕捉到父母的事件。子级可以公开父级可以调用的方法，或者您可以创建一个反应性属性，该属性表示单击父级按钮时的任何状态更改。

事件是混乱和低级别的，你不应该为无法使用它们而悲伤。使用状态和反应性要干净得多。Vue 组件实际上应该只存储“私有”状态。道具可用于将状态传递给直系子女。最好将状态提取到 a) 一个普通的旧 javascript 对象中，通过dataorprovide/inject或 b) vuex 传递，然后观察反应性发挥它的魔力。

定义数据时，您可以在任何地方引用任何内容。因此，如果您在全局范围内创建一个对象，我们称它为 $myState...

Vue.prototype.$myState = { myProp: "hello", myName: "Simon"}

然后您可以在任何组件的数据中引用它...

data : function(){return { myState : this.$myState }

有些人会反对这样做会产生意大利面条——任何地方的任何东西都可以修改你的全局状态对象，但对于许多应用程序来说，通过“规范化”状态并将其集中存储所获得的简单性将超过成本。