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. ...
随机推荐
- js判断一个字符串中出现次数最多的字符及次数
最近面试总是刷到这个题,然后第一次的话思路很乱,这个是我个人思路 for循环里两个 if 判断还可以优化 var maxLength = 0; var maxStr = ''; var count = ...
- python pickle库
一.简介: 将文本信息转变为二进制数据流存储在一个文件中,便于下次使用. 二.常用函数: dump(object, file, protocol=None) 必填参数 obj 表示将要封装的对象 必填 ...
- SpringBoot搭建环境
选择文件新建一个项目 选择:Spring Initializr,其他配置不变,点击下一步 这里一般写包名和项目名,这里我就默认,直接点击下一步 这里选择:Web --> Spring Web ...
- python连接websocket wss
def websocket_wss(): try: wss = create_connection(wss_url, timeout=10) if wss.status == 101: wss.sen ...
- 【NOIP2013模拟】七夕祭
题目描述七夕节因牛郎织女的传说而被扣上了「情人节」的帽子.于是TYVJ今年举办了一次线下七夕祭.Vani同学今年成功邀请到了cl同学陪他来共度七夕,于是他们决定去TYVJ七夕祭游玩. TYVJ七夕祭和 ...
- HTML全局属性(global attribute)有哪些（包含H5）
1.accesskey:提供了为当前元素生成键盘快捷键的提示.这个属性由空格分隔的字符列表组成.浏览器应该使用在计算机键盘布局上存在的第一个. 2.autocapitalize:控制用户的文本输入是否 ...
- 实用js方法DataUrl转为File、url转base64
声明:仅为方便自己所需,也希望能方便他人,如有侵权,联系删除. 1,DataUrl转为File /** * DataUrl转为File * @param {String} dataUrl - data ...
- 测试软件—禅道BUG管理工具
入禅 目录 入禅 1.禅道的基本使用 1.禅道的基本使用 admin(管理员) 部门:创建部门(需求部门,开发部门,测试部门,项目部门,产品部门) 组织:创建用户(产品经理,项目经理,开发人员,测试人 ...
- 《方法总结》C路的方法发现
C语言方法荟萃 定义一个最大值和最小值:#define max(x,y) ( x>y?x:y ) #define min(x,y) ( x<y?x:y ) &&: 说得 ...
- openstack核心组件——keystone身份认证服务（5）
云计算openstack核心组件——keystone身份认证服务(5) 部署公共环境 ntp openstack mariadb-server rabbitmq-server memcache 1.w ...