从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数据的值的更多相关文章

  1. React-Native子组件修改父组件的几种方式，兄弟组件状态修改(转载)

    子组件修改父组件的状态,在开发中非常常见,下面列举了几种方式.DeviceEventEmitter可以跨组件,跨页面进行数据传递,还有一些状态的修改.http://www.jianshu.com/p/ ...

  2. 【VUE】7.组件通信（二）子组件修改父组件

    1. 前提&知识点 1./components/Father.vue 是父组件, Son.vue 是子组件 2.子组件修改父组件 emit 2. 组件通信 1. 首先对子组件绑定一个事件 ch ...

  3. vue 子组件修改父组件传来的props值，报错

    vue不推荐直接在子组件中修改父组件传来的props的值,会报错 [Vue warn]: Avoid mutating a prop directly since the value will be ...

  4. vuejs利用props，子组件修改父组件的数据，父组件修改子组件的的数据，数据类型为数组

    博文参考 传送们点一点 父组件: <template> <div> <aa class="abc" v-model="test" ...

  5. 14. VUE 子组件修改父组件的值

    在 Vue 当中,父组件 -> 子组件 传值,都是通过属性的形式传递的. 子组件 修改 传递数据 直接操作父组件传递过来的值,用是可以用的,但是打开控制台后,会发现 Vue 有个警告:你不要直接 ...

  6. vue中通过.sync修饰符实现子组件修改父组件数据

    vue父子通讯是单向数据流,也就是子组件不能修改父组件的值,但是在一些情况下是需要这样做的. 先看官方文档: 接下来举例实现 1.实现一个双向数据绑定,子组件改变的时候,父组件也在改变 父组件 < ...

  7. vue—子组件修改父组件的值

    如何在子组件中修改父组件的值第一步:首先得保证父组件中有值吧这是userManage.vue 1 data(){ 2 return{ 3 dialogCreate:'false' 4 } 5 } 第二 ...

  8. Vue-自定义事件之—— 子组件修改父组件的值

    如何利用自定义的事件,在子组件中修改父组件里边的值? 关键点记住:三个事件名字 步骤如下: 这里,相对本案例,父组件定义为Second-module,对应的子组件是Three-module 第一步:你 ...

  9. vue 子组件修改父组件变量问题

    昨天遇到一个这样的场景, 主页面引用了一个子页面,子页面有个Redio选择,2个选项. 默认的,会从父组件传递一个参数给子组件作为默认值,实现默认选中效果,以及用来做反选. 开始没什么问题,页面都摆上 ...

随机推荐

  1. spring注解式开发之视图解析器

    http://localhost:8089/springmvc-04-viewResovler/springmvc/hello

  2. oracle 常用(一)

    常用的6个分组函数: 注意点:where字句中不能使用组函数.要用到having函数. 但是从优化角度看,尽量使用where avg :平均值           sum:求和            ...

  3. vue中使用echarts

    1.下载依赖 cnpm i echarts -S 2.模块中引入 <template> <div class="analyzeSystem"> <di ...

  4. Hibernate.编写xml文件无自动提示信息

    Hibernate.编写xml文件无自动提示信息 注意: 配置 xxxx.hbm.xml 文件的自动提示.和配置 hibernate.cfg.xml 文件的提示,操作步骤是一样的.只是复制的文件内容. ...

  5. C# Control.Invoke匿名委托

    if (txbValue.InvokeRequired) txbValue.Invoke(new MethodInvoker(delegate() {                          ...

  6. Yii2 Restful api创建

  7. Robot Framework 遇到过的错误 1. Chrome打开无法数据网址，地址栏只显示data:,

    问题描述:用RF打开网页时未跳转到指定网址,而是显示data:, *** Settings ***Library SeleniumLibrary *** Test Cases ***Login_Tes ...

  8. Linux 进程间通讯

    一.Linux 下进程间通讯方式 1)管道(Pipe)及有名管道(named pipe): 管道可用于具有亲缘关系进程间的通信,有名管道克服了管道没有名字的限制,因此,除具有管道所具有的功能外,它还允 ...

  9. 使用Groovy+Spock轻松写出更简洁的单测

    当无法避免做一件事时,那就让它变得更简单. 概述 单测是规范的软件开发流程中的必不可少的环节之一.再伟大的程序员也难以避免自己不犯错,不写出有BUG的程序.单测就是用来检测BUG的.Java阵营中,J ...

  10. (Review cs231n) Backpropagation and Neural Network

    损失由两部分组成: 数据损失+正则化损失(data loss + regularization) 想得到损失函数关于权值矩阵W的梯度表达式,然后进性优化操作(损失相当于海拔,你在山上的位置相当于W,你 ...