【uni-app框架】使用Vue框架之组件传参的时候错误：Avoid mutating a prop directly since the value will be overwritten when

最新推荐文章于 2024-08-20 11:34:09 发布
最新推荐文章于 2024-08-20 11:34:09 发布
阅读量2.8k 收藏
点赞数
分类专栏： uni-app
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_43343144/article/details/91963642
版权

uni-app框架之警告提示【app端会有，浏览器可能不会出现】：

12:33:16.009 [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: "popupShow"
12:33:16.051 found in
12:33:16.093 ---> common/components/general/own-dialog-form-box/own-dialog-form-box-first
12:33:16.113 common/components/app/market/market-asset-trade-form-dialog
12:33:16.134 pages/test/test

 

警告原因：使用Vue的多层组件传参之：【祖辈组件----孙组件】层层模拟父【组件向子组件props传参】如果这个props参数有变化，就会提示这个警告【但是不影响正常的功能使用】

 

这个问题想过很多解决方案：由于props是单向父向子传参，props也会动态响应式变化，如果单纯的父向子是不会有任何问题的，而牵涉到多层【祖先想孙子】传参，只要props的参数发生变化的时候，uni-app框架的APP端就会提示这个，如果要想警告取消唯一的办法就是使用Vuex管理状态变量，但是这样太麻烦，所以可以忽略不计，反正不影响正常的功能！ 

weixin_43343144
关注
专栏目录
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 6578
前端开发中，在使用Vue开发的时候，经常会遇到一些很共性的报错提示，而且有时候提示已经很明确的告诉开发者问题出现在哪里，尤其是在Chrome的控制台输出上面，只要看一下输出日志就知道问题所在。但是对于一些刚入行的开发者来说，看日志的意识还没有养成，需要借助外力来解决问题，这样不是不可以，主要是要学会看输出的日志以及提示，这样才能很好的“对症下药”。httpshttpshttps。...
【Vue】报错：Avoid mutating a prop directly since the value will be overwritten whenever the parent
Pulse的博客
05-15 1万+
当我们直接改变父组件的 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: “facomment” 会报错的原
uni-app:Avoid mutating a prop directly since the value will be overwritten whenever the parent
qq_44429079的博客
01-04 924
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: “nowIndex” vue不推荐直接在子组件中修改父组件传来的props的值，会报错 解决方法：1.全局事件总线
vue报错：Avoid mutating a prop directly since the value will be overwritten whenever the parent compone
最新发布
m0_59157023的博客
08-20 682
在 Vue.js 中，直接修改一个来自父组件的 prop（属性）是不被推荐的，因为这样做会违反组件间的单向数据流原则。当你尝试直接修改一个 prop 时，如果父组件重新渲染（例如，由于数据变化或响应式依赖更新），这个 prop 的值将会被父组件中的原始值覆盖，从而导致你的修改丢失。同时，子组件dialogVisible发生变化通过 this.$emit('updateDialogVisible',this.dialogVisible)其中：BankDialogVisible 是父组件传给子组件的值。
[Vue warn]: Avoid mutating a prop directly since the value will be overwritten whenever the parent c
qq_43840793的博客
11-28 5450
报错翻译：避免直接更改一个prop，因为每当父组件重新渲染时，该值都会被覆盖。相反，应使用基于prop值的数据或计算属性。解决办法，使用基于prop的值，即把名为activeId的prop的值放在另一个变量中，对那个变量进行修改，不修改activeId。调用组件页面不用更改，仅修改组件。声明一个新的变量activeTemp，对它进行修改。activeId为传递的值，用于存放某一页导航选中的索引记录。该页面为农机管理，activeId等于1。上述代码报错，以下是修改。3、调用组件页面代码。
[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"
vue问题错误：[Vue warn]: Avoid mutating a prop directly since the value will be overwritten whenever the
qq_27628085的博客
03-06 9625
报错： 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 mutate...
【VUE】异常解决：Avoid mutating a prop directly since the value will be overwritten
m0_67394006的博客
03-02 813
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使用prop通信出错:Avoid mutating a prop directly since the value will be overwritten whenever the parent
鸭绒的博客
09-19 4万+
使用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: “currentIndex” 产生错误的原因：在子组件中，你试图修改父组.
Avoid mutating a prop directly since the value will be overwritten whenever the parent component...
王小森的成长博客
11-22 3256
在学习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 valu...
Avoid mutating a prop directly since the value will be overwritten whenever the parent ...
u010227042的博客
07-05 1650
亲测可用，如有疑问，请私信错误：[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: "grants" (found in component )
Avoid mutating a prop directly since the value will be overwritten whenever the parent component re-
qq1722377628的博客
12-19 1100
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. 百度翻译： 避免直接改变属性，因为当父组...
Avoid mutating a prop directly since the value will be overwritten whenever the parent component re
Yanfengting的博客
03-29 5728
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: "s...
vue报错elementUI使用datepicker报错Avoid mutating a prop directly since the value will be overwritten whene
Mygongzi的博客
08-03 1605
vue报错elementUI使用datepicker报错Avoid mutating a prop directly since the value will be overwritten whene
父组件往子组件中传值出现 Avoid mutating a prop directly since the value will be overwritten whenever...
戎码江湖
12-14 325
1.问题：父组件往子组件中传递值，子组件使用父组件传递过来的值，出现了如下异常 2.解决办法：子组件不能直接使用父组件传递过来的值，需要对传递过来的值重新进行定义，然后使用重新定义的值才能正常使用。 3.具体操作：使用watch监听父组件传递过来的值的变化，然后将变化的值重新赋值给data中的定义的新值，子组件使用新值进行操作。 a.在子组件的data中新定义个值 b.监听父组件传递过来的值的变化，重新赋值 c.子组件使用新的变量进行操作 ...
Avoid mutating a prop directly since the value will be overwritten whenever the parent component re-r
09-06
- *1* [Avoid mutating a prop directly since the value will be overwritten whenever the parent component re-](https://blog.csdn.net/qq_47756657/article/details/125798183)[target="_blank" data-report-...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值