[Vue warn]: Avoid mutating a prop directly since the value will be overwritten whenever the parent c

文章讲述了在uniapp开发中遇到Vue警告关于直接修改父组件传入prop的问题,解决方法是使用data或computedproperty来处理,避免在子组件中直接修改prop。推荐在data中复制prop并监听其变化进行动态绑定。

摘要生成于 C知道 ,由 DeepSeek-R1 满血版支持, 前往体验 >

踩过的坑容易忘,记录一下
uniapp 报错
[Vue warn]: Avoid mutating a prop directly since the value will be overwritten whenever the parent component re-renders. Instead, use a data or computed property based on the prop’s value. Prop being mutated: “leftWidth”[ERROR] : [Vue warn]: Avoid mutating a prop directly since the value will be overwritten whenever the parent component re-renders. Instead, use a data or computed property based on the prop’s value. Prop being mutated: “leftWidth”—>
在这里插入图片描述
大概意思就是是不能在子组件中修改利用props从父组件传递过来的参数。解决方案可以在data中再定义一个变量接收这个参数,或者利用计算属性都行。

子组件的prop中接收了一个从父组件传递来的参数leftWidth,并且在methods或者watch中修改了这个参数,所以报了这个错。

解决:在data中定义一个新变量例如leftWidthEnd,赋值为这个参数。但是这样的话只会在该子组件被创建时赋值一次。
在这里插入图片描述

然后在watch属性中监听这个参数leftWidth或者其他要修改此参数的位置,为其赋值,实现动态关联。
在这里插入图片描述

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值