老师，对于单向数据流有个困惑点，求帮助

Question

查阅官方文档的时候也有看到说 子组件内不要修改 props的属性值，有个疑问是如果 props 传进来的是个对象呢？ 假设这么个场景：父组件获取到了后端的数据，交给子组件去渲染出条目，后端的数据类似一下这种结构
[
{ id: 1, content: ‘你好’, isSelected: false } ,
{ id: 2, content: ‘你好’, isSelected: true} ,
{ id: 3, content: ‘你好’, isSelected: false } ,
]
然后条目中有个 checkbox ，它根据后端数据显示是否勾选，并且用户进行重新勾选的并保存后要将修改后的数据再发送给后端。。按照最初的思路就是直接再 checkbox 上进行 v-module 绑定。但是这样子组件不就修改了props了么？感觉违背单向数据流的思想了。。曾想过将props 传过来的后端数据在子组件内克隆一份，然后监听子组件内克隆的数据的变更再通知父组件，这样做发现还是有问题，因为在模板中用的并不是 props 的数据，导致props数据更新后子组件并不会更新视图。。然后为了这个问题又想了其他办法解决。。最后为了不修改props的数据做了大量的额外工作。。所以很迷茫，是我对单向数据流的理解有偏差么，为什么为了实现这个思路开发时会这么繁琐。求老师指点迷津~~

Answer 1

Jokcy 2018-10-08 18:08:07

这是正常的困惑，因为其实没什么头特别好的办法解决。你说的方法也可以用，但是要监听props的变化，一旦变化要手动切换到新的props。或者学react做一个controlled input，每次操作必须通过回调进行。

• 提问者 C_CAT #1

  想问下老师遇到这种情况需要为了单向数据流而做大量额外的工作么？ 还是直接用props传过来的对象就行了？

• Jokcy 回复 提问者 C_CAT #2

  你传递对象就需要考虑对象被改了的情况，因为props只是看他传的对象引用有没有改。或者你也可以把你的对象展开单独传递props，不过也很麻烦

• 提问者 C_CAT 回复 Jokcy #3

  额。。。那想问下老师，如果你遇到我上述写的问题，会直接在子组件绑定v-modlue,， 去修改 isSelected， 还是会使用其他方法？

点开查看后面2条评论