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. ...
随机推荐
- Java代理之静态代理
什么是代理 代理就是给目标对象一个代理对象,并由代理对象控制目标的引用. 为什么要使用代理模式 1.通过引入代理对象的方式,可以间接的访问目标对象,避免直接访问目标对象给系统带来不必要的复杂性. 2. ...
- Centos7安装后进不去，死活就要填licence，该怎么办？
遇到这个问题不要麻爪,跟着我做: 1 回车 2 回车 c 回车 c 回车 然后就进入系统了. 要使它联网,点右上角的开关按钮,将PCI Ethernet选择为connect状态. 我的centos7是 ...
- 原生JDK网络编程- Buffer
Buffer用于和NIO通道进行交互.数据是从通道读入缓冲区,从缓冲区写入到通道中的.以写为例,应用程序都是将数据写入缓冲,再通过通道把缓冲的数据发送出去,读也是一样,数据总是先从通道读到缓冲,应用程 ...
- JS的全局变量无法给Ajax里的变量赋值
前阶段遇到这么一个问题,在JS定义一个全局变量,JS方法里的其他地方都能使用,偏偏ajax里无法赋值,也不是无法赋值,但赋值总是慢一拍,具体的解决方案如下图所示:
- shell 文件判断
文件判断参数 -e,文件是否存在 -f,文件存在且为普通文件 -d,文件存在且为文件夹 #!/bin/bash [ -e test.sh ] && echo "test.sh ...
- 浅入ABP(1)：搭建基础结构的 ABP 解决方案
浅入ABP(1):搭建基础结构的 ABP 解决方案 目录 浅入ABP(1):搭建基础结构的 ABP 解决方案 搭建项目基础结构 ApbBase.Domain.Shared 创建过程 ApbBase.D ...
- 基于abp的小小设备控制系统设计
客户有一堆小设备,需要通过小程序来控制它们,主要是设备门的开关.电源开关.状态查询.压力控制等.下面主要纪录下设计思路.源码地址:https://gitee.com/bxjg1987/abp 最初的设 ...
- C、算法、操作系统杂记《malloc 0大小是什么行为》
linux手册上的说明 If size is 0, then malloc() returns either NULL, or a unique pointer value that can late ...
- 集群实战（2）：K8S集群节点退出加入操作
以下报错网上其实也可以找到并解决,但是偏零碎我只是根据自己的在使用中遇到的问题做个汇总. 文章目录 首先删掉节点 node重新加入 参考文档 首先删掉节点 注意:以下操作都是在master下操作. 一 ...
- Docker公共&本地镜像仓库（七）
分发镜像 我们已经会构建自己的镜像了,那么如果在多个docker主机上使用镜像那?有如下的几种可用的方法: 用相同的Dockerfile在其他host上构建镜像 将镜像上传到公共registry(比如 ...