将 VueJS 中的属性对象传递给组件并在那里修改它的最佳实践是什么？
例如，人员表（姓名、名字、年龄、性别等），单击某个条目后，会弹出一个对话框，您可以在其中修改该条目。
如果我通过 props 将条目传递给组件并修改它，我会收到“错误消息：避免直接改变 prop，因为只要父组件重新渲染，该值就会被覆盖。相反，请使用基于道具的价值。”
使用计算值（这是许多教程等提出的可能解决方案）也不起作用，因为在 getter 函数中我返回属性值，而在 setter 函数中我将新值设置为传递的属性，然后“避免变异……”显然又出现了。
我想到的是将条目存储在 Vuex.Store 状态中，并将其与计算属性一起使用。但它为每个表创建了大量代码。对我来说看起来不干净。
还有其他解决方案吗？对我来说似乎是一个基本问题。
只需将对象作为一个整体传递（类型的单个 propObject) 现在您可以根据需要修改子组件中对象的属性。
是的，许多人认为这是反模式。他们的论点是，如果突变遍布代码库，则很难推理代码。坦白说，我不相信这种说法。如果我创建该组件并将其命名为“PersonEditor”（例如），那么该组件的作用非常清楚，并且可以合理地预期它会修改传入的数据......
使用 Vuex（或 Pinia ...尝试一下，太棒了！）也有它的价值（中央存储、时间旅行调试等），但在简单的情况下，编写（和维护）大量样板代码是不合理的坚持一些教条...
此外，在大多数现实生活场景中，当您需要编辑某些“记录”时，您还需要其他功能。例如，“取消”按钮（必须还原用户所做的所有更改）或不将中间值（由于用户与表单交互的过程而可能无效）传播到父级或商店。完美的解决方案是复制对象/记录（例如使用展开运算符 - 如果对象不包含深度嵌套值），将其传递给组件并在用户单击“保存”时使用事件将其取回。现在“编辑器”组件的代码要简单得多，但父组件负责“提交”更改（用新对象替换原始对象）
Update
只是要明确一点。有两种不同（但相似）的错误消息。一个是在运行时来自 Vue 本身 - 如果你做了类似的事情this.propA = 3在孩子身上。这很好，因为这确实是一个问题......
另一个可以来自 ESLint，特别是它的Vue 插件/规则 https://github.com/vuejs/eslint-plugin-vue。规则vue/no-mutating-props https://eslint.vuejs.org/rules/no-mutating-props.html#vue-no-mutating-props。即使你做了类似的事情，这个也会咬你this.propA.someProperty = 3这在技术上是正确的，但它是反对的“规则” https://vuejs.org/style-guide/rules-use-with-caution.html#implicit-parent-child-communication
本文内容由网友自发贡献，版权归原作者所有，本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容，请联系:hwhale#tublm.com(使用前将#替换为@)
