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 阅读 · 0 ·
CC 4.0 BY-SA版权
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
文章标签：

#vue.js #javascript

本文介绍了在Vue中遇到的单选组件修改父组件prop值导致的错误，以及两种解决方案。一是通过在子组件中创建中间变量同步父组件传递的值，二是利用`.sync`修饰符结合`$emit`更新父组件状态。这两种方法有效地遵循了Vue的单向数据流原则。

问题

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

在这里插入图片描述

原因

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

解决

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

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

父组件

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

子组件

this.$emit('update:item',data)
【VUE】异常解决：Avoid mutating a prop directly since the value will be overwritten ...
2025 热爱与开始
07-03 8万+
author: jwensh date: 2021.06.29 文章目录1. 需求及报错2. 分析原因3、解决方案 1. 需求及报错 需求： 使用的场景是：A 组件中引用 B 组件，使用 v-model 给 B 传递参数，B 使用 props: { value } 接收内容，在 B 中根据逻辑直接修改并赋值 value， 事件触发后在浏览器 console 里看到报错，内容如下： Avoid mutating a prop directly since the value will be overwri.
vue中5种处理Vuewarn异常的方法，解决Prop being mutated: “placement“
赵得C
05-11 1935
vue中5种处理Vuewarn异常的方法，解决Instead, use a data or computed property based on the prop‘s value. Prop being mutated: “placement“
解决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
Instead, use a data or computed property based on the prop‘s value. Prop being mutated: “placement“
qq_64180379的博客
12-14 1217
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
报错：use a data or computed property based on the prop‘s value. Prop being mutated: “placement“
m0_61663332的博客
08-05 1642
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"
vue父组件更改自组建的值得时候报错这个的解决办法 Instead, use a data or computed property based on the prop's value
m0_37666587的博客
04-10 6703
[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 ...
Instead, use a data or computed property based on the prop‘s value.
m0_53461006的博客
11-12 1195
情况： vue 父组件改变子组件的值，并传回给子组件。报错。 props 只是单向传递。 解决： 使用 this.$emit
use a data or computed property based on the prop‘s value. Prop being mutated: “xxx“
m0_59157023的博客
02-09 1036
the parent component re-renders. Instead, use a data or computed property based on the prop's value. Prop being mutated: "iss"
Avoid mutating a prop ..... Instead, use a data or computed property based on the prop‘s value
小哈力----一个小前端工程师
07-15 792
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 1229
小结：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.
use a data or computed property based on the prop‘s value.【vue报错】
weixin_44707050的博客
10-26 751
在使用组件传值（父子之间传值）时，报了这样一个错误； 原因是，儿子直接改了父亲传过来的值，再传给父亲； 解决：儿子重新定义一个变量传给父亲即可；
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 3832
今天本来想用下Element-ui的date日期时间组件，居然发现使用date组件后一直报错，大概意思是和props相关，但是我的页面组件也没有props，我去看了一下源码发了问题所在，先看报错吧 很重要的一段：`use a data or computed property based on the prop's value. Prop being mutated: "placement" `...
【elementUI】日期组件报错Prop being mutated: “placement“
kangluon的博客
08-09 825
Prop being mutated: “placement“
使用element-ui的日期选择器（DatePicker）报错：Prop being mutated: “placement“
weixin_45316705的博客
07-28 945
element-ui，vue 2.0
vue 子组件直接修改父组件props传来的值报错如何解决？
浮生的博客
08-23 2269
报错信息： 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. 原因：报错原因：props传值是单向数据流，只能由父组件传递给子组件，子组件被动接受，一旦子组件自己试图修改props中的值，就会报上述错误，这样
Instead, use a data or computed property based on the prop's value. Prop being mutated: "model"
最新发布
06-24
### 解决 Vue 中关于避免直接修改 prop 的警告，并基于 `model` 使用 data 或 computed 属性 在 Vue 中，直接修改从父组件传递下来的 `prop` 是不推荐的行为，因为这会导致数据流的混乱，并且可能会引发不可预期的行为。如果需要修改 `prop` 的值，应该通过 `data` 或 `computed` 属性来处理，而不是直接更改 `prop`[^2]。 #### 问题描述 当子组件接收到一个名为 `model` 的 `prop` 时，如果尝试直接修改它，Vue 会发出警告： ``` 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. ``` 这意味着每当父组件重新渲染时，子组件中的 `model` 值将被覆盖，因此直接修改它是不安全的。 #### 解决方案 ##### 方法一：使用本地 `data` 属性 可以将 `model` 的值复制到子组件的本地 `data` 属性中，然后在子组件中操作这个本地属性。例如： ```javascript props: { model: { type: String, default: '' } }, data() { return { localModel: this.model // 将 prop 的值赋给本地 data 属性 }; }, watch: { model(newVal) { this.localModel = newVal; // 当 prop 更新时同步本地 data 属性 }, localModel(newVal) { this.$emit('update:model', newVal); // 同步更新到父组件 } } ``` 这样，子组件可以通过修改 `localModel` 来实现逻辑，而不会直接修改 `model`[^2]。 ##### 方法二：使用计算属性（`computed`） 如果需要对 `model` 进行转换或派生新值，可以使用 `computed` 属性。例如： ```javascript props: { model: { type: String, default: '' } }, computed: { normalizedModel() { return this.model.trim().toUpperCase(); // 对 prop 的值进行转换 } } ``` 在这种情况下，`normalizedModel` 是基于 `model` 的计算属性，适用于需要对 `prop` 的值进行加工但不需要修改原始值的场景。 ##### 方法三：结合 `v-model` 实现双向绑定 如果希望实现父子组件之间的双向绑定，可以通过 `v-model` 和自定义事件来完成。例如： ```javascript props: { modelValue: { type: String, default: '' } }, data() { return { localModel: this.modelValue // 将 prop 的值赋给本地 data 属性 }; }, watch: { modelValue(newVal) { this.localModel = newVal; // 当 prop 更新时同步本地 data 属性 }, localModel(newVal) { this.$emit('update:modelValue', newVal); // 同步更新到父组件 } } ``` 在模板中使用 `v-model` 绑定： ```vue <template> <input v-model="localModel" /> </template> ``` 这种方式允许父组件通过 `v-model` 控制子组件的状态，同时子组件也可以通过事件通知父组件状态的变化[^4]。 --- ### 注意事项 - 所有的 `prop` 都使得其父子 `prop` 之间形成了一个单向下行绑定：父级 `prop` 的更新会向下流动到子组件中，但是反过来则不行。这防止了从子组件意外改变父级组件的状态，从而导致应用的数据流向难以理解。 - 每次父级组件发生更新时，子组件中所有的 `prop` 都将会刷新为最新的值。因此，不应该在一个子组件内部直接改变 `prop`[^2]。 --- ### 示例代码 以下是一个完整的示例，展示如何正确处理 `model`： ```javascript // 子组件 export default { props: { model: { type: String, default: '' } }, data() { return { localModel: this.model // 将 prop 的值赋给本地 data 属性 }; }, watch: { model(newVal) { this.localModel = newVal; // 当 prop 更新时同步本地 data 属性 }, localModel(newVal) { this.$emit('update:model', newVal); // 同步更新到父组件 } } }; ``` ```vue <!-- 父组件 --> <template> <child-component :model="parentModel" @update:model="parentModel = $event"></child-component> </template> <script> import ChildComponent from './ChildComponent.vue'; export default { components: { ChildComponent }, data() { return { parentModel: 'initial value' }; } }; </script> ``` ---
评论 1
成就一亿技术人!
拼手气红包6.0元
还能输入1000个字符
 
红包 添加红包
表情包 插入表情
表情包 代码片
 条评论被折叠 查看
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值