VueJS - 在子组件修改道具数据后更新父计算属性答案

【问题标题】：VueJS - Update a parent computed property after a child component modifies prop dataVueJS - 在子组件修改道具数据后更新父计算属性
【发布时间】：2021-12-20 08:13:15
【问题描述】：

我需要制作一个相对复杂的 API 请求对象，其中有大量 UI 组件负责更新对象的不同属性。

我将基本请求模型作为 prop 从父组件传递给其子组件，子组件将其传递给他们的子组件（向下几个“代”）。

在父级，我有一个返回此数据模型字段的计算属性，以及对该计算属性的监视。

当子组件更新模型上的属性时，它会成功更新所有引用它的地方，但父组件上的计算属性无法重新计算，因此手表永远不会激活。

我猜我在这里的某个地方错过了这一点，但我想不出如果不通过 UI 求助于长事件链，我还能如何更新。我应该如何解决这个问题？

【问题讨论】：

只是将 prop 传递给孩子并在那里更新不会触发计算的重新计算，使用 .sync 并使用 $emit (In the child) 更新变量，然后父计算的 prop 应该重新计算如果里面的东西更新了。
@Woohaik So.. 对于 4 层深的组件，这必须将事件一直冒泡到对象的“所有者”才能更新。那是我想要避免的：S .sync 的东西似乎只是 Vue2.3 中的一个功能？我在这里错过了什么吗？
听起来你在计算中的某个地方失去了反应性。

标签： vue.js vue-component

【解决方案1】：

对于任何有类似问题的人 - 根据我的研究，修改 props 上的参考值似乎不是 VueJS 的预期方法。真可惜，因为最初它看起来像是一个非常整洁的模式。

我现在已经实现了 vuex，它运行良好，并且避免了长线事件回到道具数据的原始所有者。

如果您想按下它，那么修改对象本身的引用将强制更新链。因此（例如）如果您想更新道具数据的数组属性，那么您将替换整个数组对象而不是“推送”它（导致其他组件在该数组属性上具有计算属性的重新计算）。但同样，不推荐。

【讨论】：