vue.js - 如何将VueJS中的属性对象传递给组件来修改它？

Question

将 VueJS 中的属性对象传递给组件并在那里修改它的最佳实践是什么？

例如，人员表格(姓名、年龄、性别等)，单击某个条目后，会弹出一个对话框，您可以在其中修改该条目。

如果我通过 props 将条目传递给组件并修改它，我会收到“错误消息:避免直接改变 prop，因为只要父组件重新渲染，该值就会被覆盖。相反，请使用数据或计算属性基于 Prop 的值(value)。”

使用计算值(这是许多教程等提出的可能解决方案)也不起作用，因为在 getter 函数中我返回属性值，而在 setter 函数中我将新值设置为传递的属性然后“避免变异...”显然又出现了。

我想到的是将条目存储在 Vuex.Store 状态中，并将其与计算属性一起使用。但它为每个表创建了大量代码。对我来说看起来不干净。

还有其他解决方案吗？对我来说这似乎是一个基本问题。

Answer 1

只需将对象作为一个整体传递(Object 类型的单个 prop)，现在您可以根据需要修改子组件中对象的属性。

是的，许多人认为这是反模式。他们的论点是，如果突变遍布代码库，则很难推理代码。坦白说，我不相信这种说法。如果我创建该组件并将其命名为“PersonEditor”(例如)，那么该组件的作用以及原因就非常清楚，并且可以合理地预期它会修改传入的数据...

使用 Vuex(或 Pinia ...尝试一下，太棒了!)也有它的值(value)(中央存储、时间旅行调试等)，但在简单的情况下，编写(和维护)大量的内容是不合理的样板代码只是为了坚持一些教条......

此外，在大多数现实生活场景中，当您需要编辑某些“记录”时，您还需要其他功能。例如，“取消”按钮(必须还原用户所做的所有更改)或不将中间值(由于用户与表单交互的过程而可能无效)传播到父级或商店。完美的解决方案是制作对象/记录的副本(例如使用展开运算符 - 如果对象不包含深层嵌套值)，将其传递给组件并在用户单击“保存”时使用事件将其取回。现在“编辑器”组件的代码更加简单，但父组件负责“提交”更改(用新对象替换原始对象)

更新

只是为了清楚起见。有两种不同(但相似)的错误消息。一种是在运行时来自 Vue 本身 - 如果您在子级中执行类似 this.propA = 3 的操作。这很好，因为这确实是一个问题......

另一个可以来自 ESLint，特别是它的 Vue plugin/rules 。规则vue/no-mutating-props 。即使你做了像 this.propA.someProperty = 3 这样的事情，这在技术上是正确的，但它违反了"the rules"，这个也会咬你。