首页 > 其他 > 详细

vue2.0子组件修改父组件props数据的值

时间:2018-07-06 20:43:08      阅读:304      评论:0      收藏:0      [点我收藏+]

从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数据的值

原文:https://www.cnblogs.com/zhaozhenzhen/p/9275418.html

(0)
(0)
   
举报
评论 一句话评论(0
关于我们 - 联系我们 - 留言反馈 - 联系我们:wmxa8@hotmail.com
© 2014 bubuko.com 版权所有
打开技术之扣,分享程序人生!