vue子组件修改父组件传递过来的值

这里不再赘述父子组件及子父组件传值，不懂的同学可以翻看我以前写过的关于两者传值的文章

父子组件传值：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 广播一个事件给父组件，并将值一并传递，父组件 @子组件广播过来的事件，并定义一个方法，在该方法中，改变传递过来的值，父组件又会将值传递给子组件，这样就形成了一个闭环，问题得以解决。

上面的解决办法是指传递的参数只应用于一个子组件，并不满足应用多个子组件时的情况，当应用于多个子组件时，使用以下方法：

　　子组件不能修改父组件传递过来的值的原因，就是因为vue的单向数据流限制，当然，这个限制是很有必要的，我们假设一个场景，父组件有多个子组件，都用到了某个传递的参数，其中一个子组件修改了父组件传递过来的值，那么其他的子组件接收到的也会是改变后的值，这样显然是不合理的。

　　既然不能直接修改，那么，我们不妨在子组件定义一个副本，用来接收父组件传递过来的值，子组件定义的每个参数，其作用域都只局限于当前组件，所以，直接修改副本，并不会影响其他子组件。