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个选项. 默认的,会从父组件传递一个参数给子组件作为默认值,实现默认选中效果,以及用来做反选. 开始没什么问题,页面都摆上 ...
随机推荐
- selenium键盘操作
键盘操作需引用: from selenium.webdriver.common.keys import Keys 操作码表: NULL = '\ue000' CANCEL = '\ue001' # ^ ...
- 文档设计也需要坚持DRY原则--支付中心应用部署结构图完善
今天上午,我拿着支付中心的设计文档,给入职不久的同事讲解目前支付中心系统的应用部署情况.当时同事嗯嗯地点头反应. 下午呢,发现自己设计的有问题,赶紧给予完善. 代码重构方面讲究DRY编程原则.我们在设 ...
- AsssetBunlder打包
unity3d,资源过多的话.可以压缩成一个资源包.加载出来后.可以解压.找到自己需要的资源 就想.net网站.很多图标都是放一个大图片上.而不是一个图标就是一个图片 因为是在项目编辑时候给资源打包. ...
- java中的锁之AbstractQueuedSynchronizer源码分析(二)
一.成员变量. 1.目录. 2.state.该变量标记为volatile,说明该变量是对所有线程可见的.作用在于每个线程改变该值,都会马上让其他线程可见,在CAS(可见锁概念与锁优化)的时候是必不可少 ...
- Sitecore营销自动化
增加与战略性自动化营销系统的互动 Sitecore营销自动化基于DMS中的Sitecore个性化功能.营销自动化系统使用诸如位置,设备和先前访问或购买之类的客户数据来影响用户沿着购买路径的旅程.这些系 ...
- sitecore系统教程之限制对客户端的访问
如果您为不同目的配置服务器,根据角色,您可能需要禁用Sitecore客户端.例如,如果配置内容交付服务器或处理服务器,则无需访问客户端应用程序,因此在这种情况下,建议禁用客户端. 为防止未经授权访问S ...
- XML系列之--创建电文格式的XML(一)
关于XML,学校那会,老师在口中仅仅提及,自己也未曾深入接触过,仅是些将最基本XML文件内容显示在web定义的表格中之类的简单操作,如今项目中的收发电文涉及到复杂XML的操作.趁此契机好好回顾下XML ...
- Java 内存分配
静态储存区:全局变量,static 内存在编译的时候就已经分配好了,并且这块内存在程序运行期间都存在. 栈储存区:1,局部变量.2,,保存类的实例,即堆区对象的引用.也可以用来保存加载方法时的帧.函数 ...
- Dirichlet分布深入理解
Dirichlet分布 我们把Beta分布推广到高维的场景,就是Dirichlet分布.Dirichlet分布定义如下 Dirichlet分布与多项式分布共轭.多项式分布定义如下 共轭关系表示如下 D ...
- Linux基础命令---join
join 找出两个文件中相同的字段,根据相同字段合并两个文件,将合并结果显示到标准输出. 此命令的适用范围:RedHat.RHEL.Ubuntu.CentOS.SUSE.openSUSE.Fedora ...