这里不再赘述父子组件及子父组件传值, 不懂的同学可以翻看我以前写过的关于两者传值的文章
父子组件传值: https://www.cnblogs.com/Sky-Ice/p/9267192.html
子父组件传值: https://www.cnblogs.com/Sky-Ice/p/9289922.html
直接进入正题, 把一个布尔值传递给子组件, 然后, 在子组件中修改该值, 会报错
Avoid mutating a prop directly since the value will be overwritten whenever the parent component re-renders
原因:
在 vue 中, 父子组件的关系可以总结为 prop 向下传递, 事件向上传递. 父组件通过 prop 给子组件下发数据, 子组件通过事件给父组件发送消息.
Prop 是单向绑定的: 当父组件的属性变化时, 将传导给子组件, 但是反过来不会. 这是为了防止子组件无意间修改了父组件的状态, 来避免应用的数据流变得难以理解.
解决办法:
原理: 将要更改的值, 传递给父组件, 在父组件中更改, 再传递给子组件
步骤:
先将值传递给子组件, 子组件 props 接收并使用, 然后通过 $emit 广播一个事件给父组件, 并将值一并传递, 父组件 @子组件广播过来的事件, 并定义一个方法, 在该方法中, 改变传递过来的值, 父组件又会将值传递给子组件, 这样就形成了一个闭环, 问题得以解决
来源: http://www.bubuko.com/infodetail-2972197.html