【VUE】异常解决:Avoid mutating a prop directly since the value will be overwritten
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 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"
2. 分析原因
从报错内容上来看,我们改动了子组件中引用的父组件的变量,也就是 props 中的数据,是不能这么操作的;
从提示的信息上看,使用
mutated
是否可行?在 Vue2 中组件
props
中的数据只能单向流动,即只能从父组件通过组件的DOM
属性attribute
传递props
给子组件,子组件只能被动接收父组件传递过来的数据,并且在子组件中,不能修改由父组件传来的props
数据。组件内不能修改props的值,同时修改的值也不会同步到组件外层,即调用组件方不知道组件内部当前的状态是什么
2.1 这是什么原因造成?
在
vue1.x
版本中利用props
的twoWay
和.sync
绑定修饰符就可以实现props
的双向数据绑定。在
vue2.0
中移除了组件的props
的双向数据绑定功能,如果需要双向绑定需要自己来实现。
在vue2.0
中组件的props
的数据流动改为了只能单向流动,即只能由(父组件)通过组件的v-bind:attributes
传递给(子组件),子组件只能被动接收父组件传递过来的数据,并在子组件内不能修改由父组件传递过来的props
数据。官方文档解释:
prop 是单向绑定的:当父组件的属性变化时,将传导给子组件,但是不会反过来。这是为了防止子组件无意修改了父组件的状态——这会让应用的数据流难以理解。
虽然废弃了props的双向绑定对于整个项目整体而言是有利且正确的,但是在某些时候我们确实需要从组件内部修改props的需求
在 Vue2.0
中,实现组件属性的双向绑定方式(算不上是绑定了,算是异步修改), 可使用如下方法
v-model
指令或.sync
修饰符- 将修改属性的方法通过
v-bind
传给子组件调用,子组件直接按方法使用即可 - 将修改属性的方法通过
v-on
传递给子组件调用,使用$emit()
实现回调修改 - 或者使用
this.$parent
去修改
3. 解决方案: 使用 v-on 明确实现修改方式
也是为了代码可读性
不要直接修改
从父组件传过来的 props
数据,在data函数中重新定义一个变量,将props数据数据赋值在data变量上,后面修改data变量即可。如下:
B 组件接受 A组件的参数
name: “B”,
props: {
father: {
type: String,
default: null
}
}
data(){
return{
father_a : this.father
}
}
如果想要监听 A
组件中传递过来的变量,从而修改 B
组件中的某个数据,可以使用 watch
这个监听函数来监听。如下:
name: "B",
props: {father: {type: String,default: null}
}
data(){return{father_a: this.fatherson: ''}
}
//监听函数,只要从父组件中传过来的father变量发生变化,
//子组件中定义的son变量就会赋值为“儿子”
watch:{father(val, valOld){this.son = "儿子"}
}
如果 B
想修改 A
传递过来的属性可以使用 $emit
A
<B :father=“a” @change=“changeA” />
至此,子组件内数据与父组件的数据的双向绑定,组件内外数据的同步:组件内部自己变了告诉外部,外部决定要不要变。
vue1.0
数据双向绑定在 vue2.0
版本中被抛弃了呢?通过案例也可以发现双向绑定的 props
代码多,不利于组件间的数据状态管理,尤其是在复杂的业务中更是如此,不易理解和阅读其中的逻辑,所以尽量不使用这种方式的双向绑定,过于复杂的数据处理使用vuex来进行数据管理。
4. 参考
- https://vuex.vuejs.org/zh-cn/
【VUE】异常解决:Avoid mutating a prop directly since the value will be overwritten相关推荐
- vue 报错avoid mutating a prop directly since the value will be overwritten whenever
这里写自定义目录标题 avoid mutating a prop directly since the value will be overwritten whenever 子组件修改父组件值时报的错 ...
- 【VUE】异常解决:Avoid mutating a prop directly since the value will be overwritten ...
author: jwensh date: 2021.07.03 文章目录 1. 需求及报错 2. 分析原因 2.1 这是什么原因造成? 3. 解决方案: 使用 v-on 明确实现修改方式 4. 参考 ...
- 前端开发:Vue报错Avoid mutating a prop directly since the value will be…的解决方法
前言 前端开发中,在使用Vue开发的时候,经常会遇到一些很共性的报错提示,而且有时候提示已经很明确的告诉开发者问题出现在哪里,尤其是在Chrome的控制台输出上面,只要看一下输出日志就知道问题所在.但 ...
- [Vue warn]: Avoid mutating a prop directly since the value will be overwritten whenever...
报错 [Vue warn]: Avoid mutating a prop directly since the value will be overwritten whenever the paren ...
- 【vue warning】avoid mutating a prop directly
[vue warning] avoid mutating a prop directly 一.问题描述 使用props,通过父组件给子组件传值,子组件在使用props中的属性时,直接对props中的属 ...
- vue使用prop通信出错:Avoid mutating a prop directly since the value will be overwritten whenever the parent
使用props进行父子组件通信时产生错误:Avoid mutating a prop directly since the value will be overwritten whenever the ...
- avoid mutating a prop directly since the value will be overwritten whenever完美解决
在vue父组件传递数据给子组件时候,通过双向绑定给属性赋值时候,报错如下:Avoid mutating a prop directly since the value will be overwrit ...
- 解决报错:Avoid mutating a prop directly since the value will be overwritten whenever
哈喽大家好啊 最近我在进行父子组件通信得时候,发现控制台报错这个 因为我这里是附件上传得功能,我对附件得fileList进行了修改 大概意思是因为我fileList是父组件传值到子组件 然后我得附件各 ...
- 修改props的属性值,Vue warn]: Avoid mutating a prop directly since the value will be overwritten
在自己写的子组件中加了可以[v-model]的绑定功能,在父组件中使用,出现下面问题: Avoid mutating a prop directly since the value will be o ...
最新文章
- c语言二十四点游戏,C语言解24点游戏程序
- php分页不跳转,分页源代码,分页时上一页下一页不显示,但可以跳转
- kube-proxy源码解析
- tomcat-users.xml 配置(转的)
- oracle级联备库创建,ORACLE 11G 备库传备库级联传递(cascade dg) 的配置方法
- WebService和Netty的区别
- 课堂练习-水帖之王(水王)
- layui表格checkbox选择全选样式及功能
- 【转】(译)iOS Code Signing: 解惑详解
- Swift 4 和 Objective-C 在同一个工程里的混搭编程的方法
- 僵化封闭的苹果:鼠标不支持右键,键盘没有DEL键
- 网络安全—御剑后台扫描珍藏版
- PHP将swf转为gif,swf转gif 在线转换
- 人生代代无穷已,江月年年望相似——读《明朝那些事儿》有感
- CVE-2022-27778漏洞修复
- 中华人民共和国消费者权益保护法
- Web全栈~19.Java语言基本结构
- 从阿里外包到年薪40W+的高级测试工程师,我的2年转行经历...
- ObiCloth布料缝合
- 尊尊网如何从0-1启动私域运营
热门文章
- C++11中=delete的巧妙用法
- mongoDB导致时间相差8小时的解决方法
- matlab软件推广海报,海报制作软件下载-posterlabs海报制作工具下载1.0 官方版-西西软件下载...
- 运维工程师必备技能之操作系统运维(一)
- UDID和UUID的理解
- 定义一个联系人类其中有姓名 电话 年龄 性别 家庭住址 身份证号码 父母联系方式属性和无参构造方法有参构造方法...
- 力扣小周推荐——最大交换
- kaggle竞赛系列1----elo竞赛kernel分析1
- t440 linux指纹识别,ThinkPad X220 Ubuntu 14.10 上安装指纹识别
- Spring AMQP参考手册