码迷,mamicode.com
首页 > 其他好文 > 详细

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

时间:2019-03-01 15:50:12      阅读:196      评论:0      收藏:0      [点我收藏+]

标签:directly   html   har   文章   dir   事件   修改   str   布尔   

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

父子组件传值: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子组件修改父组件传递过来的值

标签:directly   html   har   文章   dir   事件   修改   str   布尔   

原文地址:https://www.cnblogs.com/Sky-Ice/p/10456533.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!