子组件修改父组件数据报错的解决方法Avoid mutating a prop directly since the value will be overwritten whenever the par

最新推荐文章于 2024-06-22 13:12:48 发布
最新推荐文章于 2024-06-22 13:12:48 发布
阅读量469 收藏
点赞数
分类专栏： vue 文章标签： vue.js
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_45393280/article/details/110853650
版权

先上报错截图在这里插入图片描述
打开有道翻译，翻译出来就是“避免直接改变支撑，因为当父组件重新呈现时，该值将被覆盖。相反，应该使用基于道具价值的数据或计算属性。道具变异:“infoData””

原因是违背了vue的单向数据流思想，只能父组件修改自组价的数据，反过来就会报警告。虽然不影响使用。

解决：我这里使用的是.sync修饰符

父组件调用子组件的时候，子组件修改的数据后面加上.sync
在这里插入图片描述

在子组件里面要用$emit

在这里插入图片描述
上面是之前写的报警告的。
下面是修改之后的

我参考的以及具体请移步
https://blog.csdn.net/liushijun_/article/details/92426854

今天也要努力写代码
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
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开发中遇到的问题总结
01-19
（1）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 ...
Vue_子组件修改父组件的值_卡bug
Mr.小灰狼_随笔
04-06 1252
Vue_子组件修改父组件的值_卡bug prop 是单向绑定的：当父组件的属性变化时，将传导给子组件，但是不会反过来。这是为了防止子组件无意修改了父组件的状态——这会让应用的数据流难以理解 另外，每次父组件更新时，子组件的所有 prop 都会更新为最新值。这意味着不应该在子组件内部改变 prop。如果这么做了，Vue 会在控制台给出警告 vue 不推荐直接在子组件中修改父组件传来的 props 的值，会报错
vue子组件修改props报错： [Vue warn]: ’Avoid mutating a prop directly since the value will be …‘解决方法
最新发布
qq_44638778的博客
06-22 1916
Vue 的数据绑定机制遵循单向数据流的原则，这意味着数据的流动是单向的，从父组件流向子组件。vue.runtime.esm.js：4448 [Vue 警告]：避免直接改变 prop，因为每当父组件重新渲染时，该值都会被覆盖。：在 Vue 组件中，父组件可以通过 props 将数据传递给子组件。子组件不能直接修改通过 props 接收到的 props 数据，但可以将 props 数据复制到自己的 data 中，然后进行修改。）将数据变化通知给父组件。事件给父组件，去修改父组件的值i，从而不会打破单向数据流。
Vue子组件修改父组件值报错：Avoid mutating a prop directly since the value will be overwritte(props组件通讯问题）
aurora
10-20 855
父子组件props修改传值问题 ????前几天，在学习vue的过程中发现了问题。当时也琢磨了好久，但为了赶上学习进度，就没有深究，今天回过头来研究。搜罗四方，终于找到了答案所在。 问题描述：在父组件中通过自定义事件触发方法，将父组件中的数据传给子组件，在子组件中接受，并且修改其值。值能被修改，但是控制台一直在报警告。 具体错误 代码示例 注意代码第12行（input v-model="childData"） <script> // 子--->父 // 子组件
报错信息：Avoid mutating a prop directly since the value will be overwritten
m0_51195433的博客
11-02 831
【代码】报错信息：Avoid mutating a prop directly since the value will be overwritten。
Avoid mutating a prop directly since the value will be overwritten whenever
大佐
04-08 8529
vue项目子组件里的某个方法调用的时候报上述错误 1.父组件 2.子组件 <template> <div> <div> <ep-model title="关联单证" v-model="model1" width="1000px" :wrap-close="false"...
Avoid mutating a prop directly since the value will be overwritten whenever the parent component re-
热门推荐
qq_36697196的博客
07-24 4万+
单向数据流 prop 是单向绑定的：当父组件的属性变化时，将传导给子组件，但是不会反过来。这是为了防止子组件无意修改了父组件的状态——这会让应用的数据流难以理解 另外，每次父组件更新时，子组件的所有 prop 都会更新为最新值。这意味着不应该在子组件内部改变 prop。如果这么做了，Vue 会在控制台给出警告 下面是一个典型例子 <div id="example"> <parent></parent> </div> <script> var
解决vue 子组件修改父组件传来的props值报错问题
12-13
当尝试直接修改props时，Vue会发出警告，如题目描述中的`[Vue warn]: Avoid mutating a prop directly...`。 原因在于，Vue的设计原则之一是单向数据流，即数据只能从父组件流向子组件，而不能反过来。父组件重新...
vue获取DOM元素并设置属性的两种实现方法
11-29
这里我想到了2个方法： 方法一： 直接给相应的元素加id,然后再document.getElementById(“id”);获取，然后设置相应属性或样式 方法二： 使用ref,给相应的元素加ref=“name” 然后再this.$...Avoid mutating a prop dir
详解Swift面向对象编程中的方法(method)
09-02
【Swift面向对象编程中的方法(method)详解】 Swift作为一门强大的编程语言，支持面向对象编程，其中的方法（Method）是实现这一编程范式的关键元素。方法是面向对象编程中类、结构体或枚举等类型定义的功能操作，...
常见iOS错误解决方案
09-27
### 常见iOS错误解决方案 #### 一、`libxml/HTMLparser.h file not found` **问题描述：** 在开发iOS应用时，有时会遇到找不到`libxml/HTMLparser.h`头文件的问题。 **解决方案：** **第一种方法：** 1. 在Xcode...
【VUE】Avoid mutating a prop directly since the value will be overwritten ...
qq_44977299的博客
01-12 451
取消element-ui组件中对话弹出框dialog控制台警告
[Vue warn]: Avoid mutating a prop directly since the value will be overwritten whenever...
CHloe____的博客
03-07 974
报错 [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在修改该参数后出现错误。 报错原因 在
已解决：[Vue warn]: Avoid mutating a prop directly since the value will be overwritten whenever the ...
m0_51749295的博客
04-17 349
关于vue2父子传值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: "dialogVisible"，一些解决思路
Avoid mutating a prop directly since the value will be overwritten whenever the parent component re
想去旅行的静静的博客
04-28 533
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: "a...
使用uniapp，报tVue警告:避免直接改变prop，因为当父组件重新呈现时，这个值将被覆盖。相反，使用基于道具值的数据或计算属性。
weixin_49296337的博客
10-11 2774
项目场景： 在使用unipp调用组件出现计算属性问题 问题描述： [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: "shareSh
Vue3子组件修改父组件的props使用v-model导致报错
akkigg的博客
11-17 4180
单向数据流 父级prop的更新会向下流动到子组件中，子组件中所有的 prop 都将会刷新为最新的值 但是反过来则不行。你不应该在一个子组件内部改变 prop。否则Vue 会在浏览器的控制台中发出如上图的警告 这是Vue官方防止从子组件意外变更父级组件的状态内容，这样会导致你应用的数据流向杂乱无章。
子组件直接改变父组件传的值的报错问题
qq_45337854的博客
12-04 1207
子组件直接改变父组件传的值的报错问题
iview 弹窗 关闭报错，Avoid mutating a prop directly since the value will be overwritten whenever the parent component re-renders
10-19
这个错误提示是因为在iview弹窗中直接修改了父组件传递过来的属性，而这个属性会在父组件重新渲染时被覆盖。正确的做法是在子组件中增加一个属性isShow用于控制对话框的显示和隐藏，这个错误提示是因为在iview弹窗中直接修改了父组件传递过来的属性，而这个属性会在父组件重新渲染时被覆盖。正确的做法是在子组件中增加一个属性isShow用于控制对话框的显示和隐藏，使用props属性给它赋值，利用watch监听属性变动更新状态，同时使用$emit触发事件传值；主组件绑定props属性和事件。具体实现可以参考上面提供的引用和中的代码。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值