vue组件传值报错： Instead, use a data or computed property based on the prop‘s value. Prop being mutated: “

最新推荐文章于 2023-08-05 08:37:32 发布
最新推荐文章于 2023-08-05 08:37:32 发布
阅读量1.7w 收藏
点赞数 1
分类专栏： VUE 文章标签： vue.js javascript
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.youkuaiyun.com/sunshineTing2/article/details/120569161
版权
本文介绍了在Vue中遇到的单选组件修改父组件prop值导致的错误，以及两种解决方案。一是通过在子组件中创建中间变量同步父组件传递的值，二是利用`.sync`修饰符结合`$emit`更新父组件状态。这两种方法有效地遵循了Vue的单向数据流原则。

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

问题

问题：在单选组件（radio）切换后，修改了来自父组件的值（item），然后报错如下：

在这里插入图片描述

原因

prop是单向绑定，不能更改数据，只能由父组件传输过来

解决

1、可以在子组件中 声明一个中间变量（value），把父组件传过来的值(item)赋值给中间变量(value),当单选切换时修改的数据为value,就不会报错

2、使用.sync修饰符与$emit(update:xxx)

父组件

<comp :item.sync="item"></comp>

子组件

this.$emit('update:item',data)
解决vue 子组件修改父组件传来的props值报错问题
12-13
vue不推荐直接在子组件中修改父组件传来的props的值，会报错 [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: “result” (found in component ) <input v-model="currentSe
use a data or computed property based on the prop‘s value.【vue报错】
weixin_44707050的博客
10-26 732
在使用组件传值（父子之间传值）时，报了这样一个错误； 原因是，儿子直接改了父亲传过来的值，再传给父亲； 解决：儿子重新定义一个变量传给父亲即可；
报错：use a data or computed property based on the prop‘s value. Prop being mutated: “placement“
m0_61663332的博客
08-05 1433
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: "placement"
Instead, use a data or computed property based on the prop‘s value. Prop being mutated: “placement“
qq_64180379的博客
12-14 1187
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: "placement" found in
vue父组件更改自组建的值得时候报错这个的解决办法 Instead, use a data or computed property based on the prop's value
m0_37666587的博客
04-10 6604
[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 ...
use a data or computed property based on the prop‘s value. Prop being mutated: “xxx“
m0_59157023的博客
02-09 947
the parent component re-renders. Instead, use a data or computed property based on the prop's value. Prop being mutated: "iss"
Instead, use a data or computed property based on the prop‘s value.
m0_53461006的博客
11-12 1155
情况： vue 父组件改变子组件的值，并传回给子组件。报错。 props 只是单向传递。 解决： 使用 this.$emit
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: "remark
最新发布
04-29
Instead, use a data or computed property based on the prop's value. Prop being mutated: 'remark'”。首先，我需要理解为什么会出现这个警告。 根据Vue的官方文档，prop是从父组件传到子组件的数据，子组件不...
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: "selected"
04-29
Vue中的props是从父组件传到子组件的单向数据流，子组件不应该直接修改prop的值，否则会触发警告，因为这会破坏数据的单向流动，导致父组件和子组件的数据不一致。 用户提到遇到了这个警告，所以问题在于子组件中...
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: "goodsInfo" 怎么解决
03-08
Instead, use a data or computed property based on the prop's value. Prop being mutated: 'goodsInfo'”。用户想知道如何解决这个问题。 首先，我得回忆一下Vue.js的组件通信机制。Vue中父组件通过props向子...
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: "num"
04-15
嗯，用户遇到了Vue.js中直接修改prop导致报错的问题，想通过使用data或computed属性来避免。首先，我需要回忆一下Vue的props机制。Vue中props是单向数据流，父组件传给子组件，子组件不能直接修改，否则会触发警告，...
el-cascader 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: "value"
03-19
可以通过将 `prop` 数据复制到子组件中的局部状态（如 `data`），从而避免直接修改传入的属性值。以下是实现代码示例： ```javascript <el-cascader v-model="localValue" :options="options"> export default...
Avoid mutating a prop ..... Instead, use a data or computed property based on the prop‘s value
小哈力----一个小前端工程师
07-15 769
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: "vid" prop之vid正在被改变。免直接改变这个prop，因为每当父组件重新渲染时，该值将被覆盖。相反
vue组件传值报错：use a data or computed property based on the prop‘s value. Prop being mutated: “tipsShow“
徐飞的博客
06-27 1万+
vue组件传值报错：use a data or computed property based on the prop‘s value. Prop being mutated: “tipsShow“ prop是单向绑定，不能更改数据，只能由父组件传输过来
vue组件传值报错：use a data or computed property based on the prop‘s value.
记录本人工作中遇到的问题、经验总结以及分享。
02-15 1172
小结：prop中的值不能更改，但是可以赋值给data中的值，将show改成menuShow。，不能更改数据，只能由父组件传输过来。原因分析：prop是。
use a data or computed property based on the prop's value.
A_bet_of_three_years的博客
11-07 2万+
use a data or computed property based on the prop's value.
3、vue报错use a data or computed property based on the prop's value.
热门推荐
rsancy-BK
09-17 3万+
  1.原本用父组件传值给子组值，再通过更改 发现报以上问题的错误  原因：prop是单向绑定，不能更改数据，只能由父组件传输过来  解决方法：可以在子组件中data中定义数据，使用$emit 和 $on 传给父组件，父组件接收后在赋值给当前要修改的数据。...
Element-ui的date日期时间组件的bug 报错 prop‘s value. Prop being mutated: “placement“
酱子
07-17 3797
今天本来想用下Element-ui的date日期时间组件，居然发现使用date组件后一直报错，大概意思是和props相关，但是我的页面组件也没有props，我去看了一下源码发了问题所在，先看报错吧 很重要的一段：`use a data or computed property based on the prop's value. Prop being mutated: "placement" `...
评论 1
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值