Avoid mutating a prop directly since the value will be overwritten报错问题解决方案
一、复现？
在用uniapp，二次封装uview的u-modal时，使用v-model="showModal"时报错（需求是点击退出登录然后需要弹出模态框），原因是将showModal作为props传递给父组件，父组件直接改变了子组件的值，这是不被单向数据流所允许的。
二、解决方案
在data中定义一个show，用作子组件的初始值，并定义方法，来设置show的显示和隐藏；同时，在父组件中注册ref，通过this.$refs.xxx.方法名()的方式来设置子组件的显示和隐藏。
代码
子组件
<u-modal v-model="show" @confirm="confirm">
</u-modal><script>export default {name: "lg-modal",emits: ['confirm'],props: {showModal: {type: Boolean,default: false},},data() {return {show:this.showModal,};},methods: {// 点击确定的响应事件confirm() {this.$emit("confirm")},// 通过ref来使子组件显示或隐藏setShow() {this.show = !this.show}},}
父组件
<lg-modal ref="lgModal" @confirm="confirmExit"></lg-modal>//此时点击退出登录，触发事件toExit() {//这是错误代码// this.show = true;//通过ref控制this.$refs.lgModal.setShow()},//confirmExit执行点击确定的事件---confirmExit(){}
Avoid mutating a prop directly since the value will be overwritten报错问题解决方案相关推荐
- Avoid mutating a prop directly since the value will be overwritten whenever the parent component re-
原因: 子组件改了父组件的值 避免修改父组件传过来的值 注意: 如果value是obj,需要进行深拷贝. 可以参考: https://blog.csdn.net/u013948858/article/ ...
- [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 ...
- Avoid mutating a prop directly since the value will be overwritten whenever
Avoid mutating a prop directly since the value will be overwritten whenever the parent component re- ...
- 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 ...
- 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 子组件修改父组件值时报的错 ...
- 报错信息：Avoid mutating a prop directly since the value will be overwritten
报错信息:Avoid mutating a prop directly since the value will be overwritten whenever the parent componen ...
- 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 the parent ...
错误:[Vue warn]: Avoid mutating a prop directly since the value will be overwritten whenever the paren ...
- 【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. 需求及报 ...
最新文章
- python学习笔记（一）之入门
- 理解离散傅立叶变换（三.复数）
- 陷入迷茫的时候怎么办呢？
- 基于javaSwing+文本存储的学生信息管理系统设计实现
- dubbo 自定义filter
- IBM HTTP Server Performance Tuning
- 图解 FAT 文件系统之基础知识（一）
- Android 设置屏幕亮度
- 基于余弦适应性骨架的差分进化算法
- win10计算机控制面板在哪里,windows10系统控制面板在哪里？快速找到Win10控制面板的三种方法...
- 亚马逊EC2服务器链接方式
- 高防IP具备哪些优势？
- 飞思卡尔Kinetis系列单片机被锁住后，怎么解锁
- 基于C/C++获取电脑网卡的IP地址信息
- **图片元信息Exif**
- umi+@umijs/plugin-qiankun的应用
- 从制造中来到智造中去
- 使用路缘石成型机一次施工作业成型
- curl wget 不验证证书进行https请求
- 数据库E-R图与关系模式图