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. ...
随机推荐
- 在微信公众号"码海"里学了一招:在update语句里使用case when 以避免多次更新导致的数据异常.
需求:将emp表中工资大于一万的降到9成,工资少于一万的乘以1.2. 难点:如果分成两句update执行,在10000附近的值可能会执行两次. 钥匙:在update语句里采用case when,使更新 ...
- nginx安装第三方模块echo
要使用第三方模块ngx_echo的功能,请重新配置添加到nginx插件中 ##下载第三方模块 wget https://github.com/openresty/echo-nginx-module/a ...
- leetcode刷题-36有效的数独
题目 判断一个 9x9 的数独是否有效.只需要根据以下规则,验证已经填入的数字是否有效即可. 数字 1-9 在每一行只能出现一次.数字 1-9 在每一列只能出现一次.数字 1-9 在每一个以粗实线分隔 ...
- 2.AVFormatContext和AVInputFormat
参考https://blog.csdn.net/leixiaohua1020/article/details/14214705 AVFormatContext: 用来存储视音频封装格式(flv,mp4 ...
- ThinkPHP6.0 判断是否有文件上传
有必要考虑不是post请求或没有指定enctype="multipart/form-data"的情况.如果是post请求还是设置了正确的编码,没有文件上传时 request()-& ...
- [LeetCode] 22. 括号生成（回溯/DP）
题目 给出 n 代表生成括号的对数,请你写出一个函数,使其能够生成所有可能的并且有效的括号组合. 例如,给出 n = 3,生成结果为: [ "((()))", "(()( ...
- 自然常数e的含义
e是一个重要的常数,但是它的直观含义却不像 π 那么明了.我们都知道,圆的周长与直径之比是一个常数,这个常数被称为圆周率,记作 π = 3.14159......可是e代表什么呢? e是“指数”(ex ...
- 如何在 PyPI安装python的软件包？
安装软件包 本节介绍如何安装Python的基本知识.包裹. 需要注意的是,这个上下文中的“包”一词被用作分布(即要安装的一组软件),而不是指包装在Python源代码中导入(即模块的容器).Python ...
- Java基础语法(10)-面向对象之三大特征
title: Java基础语法(9)-面向对象之类的成员 blog: CSDN data: Java学习路线及视频 1.面向对象特征--封装 为什么需要封装?封装的作用和含义? 我要用洗衣机,只需要按 ...
- 实验 3：Mininet 实验——测量路径的损耗率
实验目的 在实验 2 的基础上进一步熟悉 Mininet 自定义拓扑脚本,以及与损耗率相关的设 定:初步了解 Mininet 安装时自带的 POX 控制器脚本编写,测试路径损耗率. 实验任务 h0 向 ...