Avoid mutating a prop directly since the value will be overwritten whenever the parent component re
子组件修改父组件的值踩坑
Vue1.0升级至2.0之后，直接在子组件修改父组件的值是会报错的 目的是为了阻止子组件影响父组件的数据。
我们都知道在vue中，父组件传入子组件的变量是存放在props属性中的，所有的 prop 都使得其父子 prop 之间形成了一个单向下行绑定：父级 prop 的更新会向下流动到子组件中，但是反过来则不行。（父组件更新，子组件中的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 value. Prop being mutated:
解决办法：我们在调用父给子的变量的时候是跟data里面的变量一样的，都是通过this.变量来调用，这个问题就是说从父组件传入子组件的变量是不能this.变量直接改变的，要在data或者computed属性里面重新定义一个变量，改变data或者computed属性里面的变量就不会报错了。
定义一个本地的stepCodeParent 属性并将这个 prop 用作其初始值，同步对组件的修改，再通知父组件更新
总结：props只能单向传递，如果子组件要更改父组件的数据，需要上述流程进行更改！
Avoid mutating a prop directly since the value will be overwritten whenever the parent component re的更多相关文章
- 报错：[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 bei
项目中遇到父组件传值 activeIndex <Tabs :tabs="tabs" :activeIndex="activeIndex" >< ...
- [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
[Vue warn]: Avoid mutating a prop directly since the value will be overwritten whenever the parent c ...
- vue报错 [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
[Vue warn]: Avoid mutating a prop directly since the value will be overwritten whenever the parent c ...
- Vue报错之"[Vue warn]: Avoid mutating a prop directly since the value will be overwritten whenever the parent component re-renders. Instead......"
一.报错截图 [Vue warn]: Avoid mutating a prop directly since the value will be overwritten whenever the p ...
- Vue 报错[Vue warn]: Avoid mutating a prop directly since the value will be overwritten whenever the parent component re-renders
场景:父组件向子组件传递数据,子组件去试图改变父组件数据的时候. 解决:子组件通过事件向父组件传递信息,让父组件来完成数据的更改. 比如:我的父组件是普通页面,子组件是弹窗的登录界面,父组件传递的数据 ...
- Vue avoid mutating a prop directly since the value will be overwritten
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title> ...
- 报错：[Vue warn]: Avoid mutating a prop directly since the value will be overwritten whenever the paren
今天在做Vue的时候,子组件关闭的时候,报如下错误 报错:vue.esm.js?65d7:610 [Vue warn]: Avoid mutating a prop directly since th ...
- Vue 错误：Avoid mutating a prop directly
Avoid mutating a prop directly since the value will be overwritten whenever the parent component re- ...
- (复习)父子组件传值使用v-modal双向绑定,报错Avoid mutating a prop directly解决方案
报错:Avoid mutating a prop directly since the value will be overwritten whenever the parent component. ...
随机推荐
- cdq分治——bzoj2683简单题
https://www.lydsy.com/JudgeOnline/problem.php?id=2683 知识点:1.以操作的顺序进行分治 2.cdq分治维护矩阵 3.计算比mid小的给比mid大 ...
- 做SQL解析时遇到的问题
相对于算术表达式,Json和XML等解析,SQL就比较复杂了. 举个例子来说:符号“(”是目前的SqlAnalyzer1.00中作为进入递归的标志之一,到“)”结束,中间是个查询语句.如果测试用例也是 ...
- docker 停止、启动、删除镜像指令
容器 docker ps // 查看所有正在运行容器 docker stop containerId // containerId 是容器的ID docker ps -a // 查看所有容器 dock ...
- J2EE之JavaScript(1)
声明:此博客仅供记录自己的学习记录和随笔,看看就行了,就图一乐! 本篇学习随笔来自JavaScript 菜鸟教程:https://www.runoob.com/js/js-howto.html J ...
- ftp被动模式下 ftp_put 上传文件
参考地址:https://blog.csdn.net/liuhelong12/article/details/50218311
- apache环境搭建(xampp跑不起来)
写在前面:之前(2016年)学jq时,学到ajax时,需要搭建apache,我开始安的xampp集成好的软件包,但是我的电脑咋弄都跑不起来,找了好多方法还是没用,最后无奈宣告放弃.但是皇天不负有心人, ...
- Netty之ChannelOption的各种参数之EpollChannelOption.SO_REUSEPORT
socket选项 SO_REUSEPORT 转 miffa 发布于 2015/03/24 17:21 字数 3383 阅读 6076 收藏 6 点赞 1 评论 0 开发十年,就只剩下这套Java开发体 ...
- 10.Atomic-原子性操作
- 本机浏览器无法访问linux的tomcat
原因:Centos7的防火墙拦截了tomcat访问的8080端口 Redhat 等等linux firewall-cmd --permanent --zone=public --add-port=8 ...
- 《Head First 设计模式》：状态模式
正文 一.定义 状态模式允许对象在内部状态改变时改变它的行为,对象看起来好像修改了它的类. 要点: 状态模式允许一个对象基于内部状态而拥有不同的行为. 状态模式将状态封装成为独立的类,并将动作委托到代 ...