vue2.0子组件修改父组件props数据的值
从vue1.0升级至2.0之后 prop的.sync被去除 因此直接在子组件修改父组件的值是会报错的如下:

目的是为了阻止子组件影响父组件的数据
那么在vue2.0之后 如何在子组件修改父组件props传过来的值呢?
思路是通过子组件$emit发射一个方法 如下:
this.$emit('imgDataCallback', callbackUrl);
在父组件使用子组件的地方用v-on绑定这个自定义事件 如下:

然后在父组件定义这个方法
//获取imgurl
getImgData: function(obj) {
console.log(obj);
this.addForm.bannerImg = obj;
},
虽然这种方式可以修改父组件数据,但是官方是不推荐在组件内修改通过props传入的父组件数据,而是推荐使用vuex
本人vuex用的比较菜
vue2.0子组件修改父组件props数据的值的更多相关文章
- React-Native子组件修改父组件的几种方式,兄弟组件状态修改(转载)
子组件修改父组件的状态,在开发中非常常见,下面列举了几种方式.DeviceEventEmitter可以跨组件,跨页面进行数据传递,还有一些状态的修改.http://www.jianshu.com/p/ ...
- 【VUE】7.组件通信(二)子组件修改父组件
1. 前提&知识点 1./components/Father.vue 是父组件, Son.vue 是子组件 2.子组件修改父组件 emit 2. 组件通信 1. 首先对子组件绑定一个事件 ch ...
- vue 子组件修改父组件传来的props值,报错
vue不推荐直接在子组件中修改父组件传来的props的值,会报错 [Vue warn]: Avoid mutating a prop directly since the value will be ...
- vuejs利用props,子组件修改父组件的数据,父组件修改子组件的的数据,数据类型为数组
博文参考 传送们点一点 父组件: <template> <div> <aa class="abc" v-model="test" ...
- 14. VUE 子组件修改父组件的值
在 Vue 当中,父组件 -> 子组件 传值,都是通过属性的形式传递的. 子组件 修改 传递数据 直接操作父组件传递过来的值,用是可以用的,但是打开控制台后,会发现 Vue 有个警告:你不要直接 ...
- vue中通过.sync修饰符实现子组件修改父组件数据
vue父子通讯是单向数据流,也就是子组件不能修改父组件的值,但是在一些情况下是需要这样做的. 先看官方文档: 接下来举例实现 1.实现一个双向数据绑定,子组件改变的时候,父组件也在改变 父组件 < ...
- vue—子组件修改父组件的值
如何在子组件中修改父组件的值第一步:首先得保证父组件中有值吧这是userManage.vue 1 data(){ 2 return{ 3 dialogCreate:'false' 4 } 5 } 第二 ...
- Vue-自定义事件之—— 子组件修改父组件的值
如何利用自定义的事件,在子组件中修改父组件里边的值? 关键点记住:三个事件名字 步骤如下: 这里,相对本案例,父组件定义为Second-module,对应的子组件是Three-module 第一步:你 ...
- vue 子组件修改父组件变量问题
昨天遇到一个这样的场景, 主页面引用了一个子页面,子页面有个Redio选择,2个选项. 默认的,会从父组件传递一个参数给子组件作为默认值,实现默认选中效果,以及用来做反选. 开始没什么问题,页面都摆上 ...
随机推荐
- Appium基础(二)demo
具体配置,请看上一篇 一.启动Android模拟 Start 打开如下界面:这个过程可能会有些慢,黑屏等等,请耐心等待 二.appium配置 1.点机器人图标 PlatformVersion 选19, ...
- Selenium基础知识(九)验证码
关于Selenium处理验证码总结下: 1.去掉验证码(这个为了测试,去掉可能性不大) 2.万能验证码(让开发给做一个万能验证码,可能性也不大) 3.OCR光学识别,python包Python-tes ...
- html utf-8 中文乱码
刚才用ajax从记事本中读文档的时候,发现在页面上显示是乱码. 页面编码:<meta charset="utf-8"> 搞半天最后发现是记事本编码格式的问题,记事本默认 ...
- C# 调用.bat 提示该命令不是内部命令或外部命令
前提:双击.bat文件可以执行成功,用C#调用提示该命令不是内部命令或外部命令...... 解决方法:下面代码的红色标注,既要设置.bat文件的文件名FileName,也要设置.bat文件所在的文件夹 ...
- C语言堆栈的区别
堆(heap)和栈(stack)有什么区别?? 简单的可以理解为: heap:是由malloc之类函数分配的空间所在地.地址是由低向高增长的. astack:是自动分配变量,以及函数调用的时候所使用的 ...
- python XML文件解析:用ElementTree解析XML
Python标准库中,提供了ET的两种实现.一个是纯Python实现的xml.etree.ElementTree,另一个是速度更快的C语言实现xml.etree.cElementTree.请记住始终使 ...
- c# 使用checked和unchecked
首先要知道int型在c#中是一个32位的数.由此可以知道int型的取值范围是(-2147483648~2147483647)当要使用int的最小值或者是最大值的时候,可以使用int.MinValue和 ...
- c# 共享事件处理程序
使用同一个方法来处理多个Button实例的Click事件. 1.全选所有的Button,在事件添加中的Click点击事件中添加处理函数. 2.假如一个label控件用于显示按钮按下输出文本 3.处理函 ...
- 转:"为自动填充列调整大小期间不能执行此操作"解决办法 .
转载自:http://blog.csdn.net/zhxingway/article/details/5384690 今天在测试的时候,打开一个窗口突然发现出现以下错误,就算我在打开窗口那个按钮里面和 ...
- ptrace线程
在ptrace时使用waitpid(-1, &status, 0);无法正常trace 修改为waitpid(-1, &status, __WALL);即可 原因是: