vue子组件修改父组件传递过来的值
Posted sky-ice
tags:
篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了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子组件修改父组件传递过来的值的主要内容,如果未能解决你的问题,请参考以下文章