子到父数据Vue JS

Posted 2023-02-23

【中文标题】子到父数据Vue JS

【英文标题】：Child to parent data Vue JS

【发布时间】：2018-04-02 01:45:52

【问题描述】：

大家好，我不太清楚该怎么做，我对 Vue 很陌生，如何将我的数据从 NewDeal 组件发送到 DealsTable 组件？如您所见，NewDeal 有两个父组件。我已经阅读了有关 $emit 和 $on 的信息，但只是想确认我是否真的需要像 newDeal -> QuickActions -> SideBar 那样做？如果我的想法是正确的，我不确定如何从那里开始。我希望你能给我一些启示。

我尝试从NewDeal 组件发出一个事件并从DealsTable 组件监听它，但没有成功，我不确定这是否可能，或者它应该真的是孩子是直接的父母的后代？

谢谢！

【参考方案1】：

使用全局变量总线修复它并用总线替换它。

app.js 中的声明：

window.bus = new Vue()

发射器： bus.$emit()

听众： bus.$on()

【参考方案2】：

我尝试从 NewDeal 组件发出一个事件并从 DealsTable 组件监听它，但没有成功

看起来你有一个解决方案，但我想我会评论这一部分以防万一。 DealsTable 没有看到来自 NewDeal 的事件的原因是子组件发出的 vue 事件只会传播到直接的父组件，而不会传播到更高的父组件。

如果您希望 vue 事件在链的更高位置被看到，那么孩子的父母需要在侦听事件并接收到事件后发出事件。通过这种方式，每个父母都可以将事件向上推，但在许多情况下这太复杂了，所以你的 window.bus 方法是要走的路。希望这有助于使您所看到的更有意义。

【讨论】：

感谢您的知识！这实际上是我的第一个想法，我会像发射链和监听器那样做，这将涉及大量工作，而且不是很理想。好吧，javascript 仍然是 javascript :D 谢谢！我也读过 Vuex，但现在可能还没有。