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

最新推荐文章于 2024-09-06 10:38:18 发布
原创 最新推荐文章于 2024-09-06 10:38:18 发布 · 1k 阅读 · 0 ·
CC 4.0 BY-SA版权
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
文章标签：

#微信小程序 #vue.js

在Vue2.0中，由于props数据只能单向流动，直接修改props会触发警告。为了解决这个问题，应当使用$emit通知父组件来更新数据。子组件通过事件触发函数，父组件则通过监听该事件来响应并更新相应的数据。这样做可以保持数据流的清晰和单向性。

报错

[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.

问题情形

组件A调用组件B，同时A需要传参给B，B使用props:{}接收参数值。B在修改该参数后出现错误。

报错原因

  • 在 vue1.x 版本中利用 props 的 twoWay 和 .sync 绑定修饰符就可以实现 props 的双向数据绑定。
  • 在 vue2.0 中移除了组件的 props 的双向数据绑定功能，数据只能单向流动，子组件只能被动接收父组件传递过来的数据，并在子组件内不能修改由父组件传递过来的 props 数据。

解决方法

使用$emit让父组件监听到自组件的事件。

子组件事件响应函数：
在这里插入图片描述

父组件响应函数：
在这里插入图片描述
在这里插入图片描述

参考

https://blog.youkuaiyun.com/u013948858/article/details/118342541

CHloe____
关注
avoid mutating a prop directly since the value will be overwritten whenever完美解决
计算机毕业论文源码，学生个人网页制作html源码。贴近用户做网络推广和互联网优化。
09-07 5万+
avoid mutating a prop directly since the value will be overwritten whenever完美解决，不要直接修改从父组件传过来的props数据，在data函数中重新定义一个变量，将props数据数据赋值在data变量上，后面修改data变量即可。既然在双向绑定时会出现问题，那么可以在子组件中定义一个data，然后把从父组件传递过来的数据通过props赋值给data，再把data绑定到v-model上。
前端开发：Vue报错Avoid mutating a prop directly since the value will be…的解决方法
全沾软贱开发攻城狮
07-25 1万+
前端开发中，在使用Vue开发的时候，经常会遇到一些很共性的报错提示，而且有时候提示已经很明确的告诉开发者问题出现在哪里，尤其是在Chrome的控制台输出上面，只要看一下输出日志就知道问题所在。但是对于一些刚入行的开发者来说，看日志的意识还没有养成，需要借助外力来解决问题，这样不是不可以，主要是要学会看输出的日志以及提示，这样才能很好的“对症下药”。httpshttpshttps。...
Avoid mutating a prop directly since the value will be overwritten whenever the parent component re-
文龙刚的博客
09-06 6841
【代码】Avoid mutating a prop directly since the value will be overwritten whenever the parent component re-
【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 warn]: Avoid mutating a prop directly since the value will be overwritten whenever the parent
qq_32973061的博客
09-06 586
全部报错如下： [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. Pr...
报错：[Vue warn]: Avoid mutating a prop directly since the value will be overwritten whenever the paren
weixin_42401141的博客
08-12 1086
Avoid mutating a prop directly
【VUE】异常解决：Avoid mutating a prop directly since the value will be overwritten
m0_67394006的博客
03-02 994
author: date: 2021.07.03 文章目录 1. 需求及报错 2. 分析原因 2.1 这是什么原因造成？ 3. 解决方案: 使用 v-on 明确实现修改方式 4. 参考 1. 需求及报错 需求： 使用的场景是：A 组件中引用 B 组件，使用 v-model 给 B 传递参数，B 使用 props: { value } 接收内容，在 B 中根据逻辑直接修改并赋值 value， 事件触发后在浏览器 console 里看到报错，内容如下： Avoid mutating a .
[Vue warn]: Avoid mutating a prop directly since the value will be overwritten whenever the parent..
qq_58062502的博客
02-06 5万+
[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: "value"
报错：Avoid mutating a prop directly since the value will be overwritten whenever the parent component
weixin_51173316的博客
11-30 2444
[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: "filterStatus" 这个报错的意思是子组件修改了父组件传来的值。 原因：父.
[Vue warn]: Avoid mutating a prop directly since the value will be overwritten whenever the parent c
iOS_MingXing的博客
12-26 1003
大概意思就是是不能在子组件中修改利用props从父组件传递过来的参数。解决方案可以在data中再定义一个变量接收这个参数，或者利用计算属性都行。子组件的prop中接收了一个从父组件传递来的参数leftWidth，并且在methods或者watch中修改了这个参数，所以报了这个错。解决：在data中定义一个新变量例如leftWidthEnd，赋值为这个参数。但是这样的话只会在该子组件被创建时赋值一次。然后在watch属性中监听这个参数leftWidth或者其他要修改此参数的位置，为其赋值，实现动态关联。
报错 [Vue warn]: Avoid mutating a prop directly since the value will be overwritten whenever the paren
很长很长的专栏
09-21 2万+
有时候
vue.runtime.esm.js:4674 [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: "value"
最新发布
09-12
你看到的警告信息是： ``` [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: "value" ``` --- ## 🔍 问题分析： 这个警告说明你在子组件中**直接修改了从父组件传入的 `prop`**，这是 Vue 中不推荐的做法。 Vue 的设计理念是 **单向数据流**：父组件通过 `props` 传值给子组件，子组件不能直接修改这个值，否则会破坏数据流的清晰性和可维护性。 --- ## ✅ 示例错误代码： ```vue <template> <input :value="value" @input="handleChange" /> </template> <script> export default { props: ['value'], methods: { handleChange(e) { this.value = e.target.value; // ❌ 错误：直接修改了 prop } } } </script> ``` --- ## ✅ 正确做法一：使用 `.sync` 修饰符（适用于 Vue 2） ```vue <!-- 父组件 --> <child-component :value.sync="parentValue" /> <!-- 子组件 --> <script> export default { props: ['value'], methods: { handleChange(e) { this.$emit('update:value', e.target.value); // 使用 .sync 机制 } } } </script> ``` --- ## ✅ 正确做法二：使用 `v-model`（适用于 Vue 2 & Vue 3） ```vue <!-- 父组件 --> <child-component v-model="parentValue" /> <!-- 子组件 --> <script> export default { props: ['value'], methods: { handleChange(e) { this.$emit('input', e.target.value); // Vue 会自动识别 v-model } } } </script> ``` --- ## ✅ 正确做法三：使用 `data` 或 `computed`（推荐通用做法） ### 方法 1：用 `data` 拷贝 prop ```vue <script> export default { props: ['value'], data() { return { localValue: this.value // ✅ 用 data 属性拷贝 prop } }, watch: { value(newVal) { this.localValue = newVal; // ✅ 父组件更新时同步 } }, methods: { handleChange(e) { this.localValue = e.target.value; this.$emit('update:value', this.localValue); // 通知父组件更新 } } } </script> ``` ### 方法 2：使用 `computed` 属性（双向绑定） ```vue <script> export default { props: ['value'], computed: { syncedValue: { get() { return this.value; }, set(val) { this.$emit('input', val); // 或 update:value } } } } </script> <template> <input v-model="syncedValue" /> </template> ``` --- ## ✅ 总结对比： | 方式 | 是否推荐 | 适用场景 | |------|----------|-----------| | `.sync` | ✅ 推荐 | 多个 prop 同步 | | `v-model` | ✅ 推荐 | 单个 prop 双向绑定 | | `data` 拷贝 | ✅ 推荐 | 需要本地状态 | | `computed` 双向绑定 | ✅ 推荐 | 更优雅的双向绑定 | | 直接修改 prop | ❌ 不推荐 | 会被 Vue 警告 | --- ## ✅ Vue 3 中的变化（Composition API） 如果你使用 Vue 3 + `<script setup>`： ```vue <script setup> import { defineProps, defineEmits, ref } from 'vue' const props = defineProps(['value']) const emit = defineEmits(['update:value']) const localValue = ref(props.value) function handleChange(e) { localValue.value = e.target.value emit('update:value', localValue.value) } </script> <template> <input :value="localValue" @input="handleChange" /> </template> ``` --- ##
评论
成就一亿技术人!
拼手气红包6.0元
还能输入1000个字符
 
红包 添加红包
表情包 插入表情
表情包 代码片
 条评论被折叠 查看
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值