vue组件间数据传递的易错点

  • 问题出现
  • 如何解决
  • 警告原因
  • el-dialog作为子组件时,怎么传递值给父组件
  • 知识点

问题出现

  近期在使用vue做项目过程中,父组件a将数据传递给了子组件b,子组件b中做了状态的处理,然后习惯性的修改了父组件a传过来的值,即修改了子组件props中的值,这时实际效果正常展现,但是F12打开浏览器时,却看到浏览器中抛出了警告信息。
这里写图片描述

如何解决

  仔细查看该警告信息,实际已近告诉了解决办法。即如果想要使用装饰性的数据信息,可以使用computed属性进行进一步运算。如从父组件向子组件传了小写的字符串信息,但在子组件需要使用大写的字符串信息,此时就可以使用computed属性,对传来的props属性值,进行upperCase的转换操作。

computed: {
    upperString: {
        get: function() {
          return this.$props.lowerString;
        }
    }
}

警告原因

  之所以出现该警告的原因,是因为在vue中,数据的传递是单向性的,即数据都是从父级组件单向下行进行绑定的,而且通过props传递的子组件属性,是直接受到父组件数据的影响,进行响应式变化的。即父组件数据变化,会直接影响子组件中的数据变化。如果在子组件中,修改了该父组件传递的数据,会导致vue无法监控数据状态的变化。
  不过,在子组件中,可以通过$emit方式,更改某个想要传递给父组件的数据信息,在父组件中,进行间接的赋值更改。在实际开发中,通常有两种情况会习惯性的更改父组件传来的值。
  第一种是,将父组件传来的值,当做子组件自己的属性进行应用,也就是我当时所犯的那个错误。这个错误必须使用emit方法向父组件进行数据传递,间接的去改变父组件的属性值。
  第二种是,将父组件的值,进行格式上的转化后再使用,这种方式也就是本文提到的使用computed属性修改去解决。

el-dialog作为子组件时,怎么传递值给父组件

  在这次的项目中,我利用element-ui中的el-dialog作为子组件,当我的父组件向该组件传关闭flag值时,子组件需要通过emit方法向父组件间接更改属性值。但我发现即使利用了本文提到的方法解决,还是会出现该警告信息,后来查看el-dialog的源码,才找到问题的解决办法。
  这里写图片描述
  这里写图片描述
  这是问题出现时的截图信息,可以看到,最后的解决办法,是我将修改属性,放到了el-dialog的before-close属性中。
  查看element-ui源码可以发现,当在关闭对话框前,如果该属性是function,必须在befor-close属性中定义close方法。由于emit是个方法属性,因此必须首先定义在before-class属性中,然后在定义的属性close方法中,才能去调用传递给父组件的emit方法。
  这里写图片描述
  至此,问题得以解决。

知识点

  • 父子组件的单向数据传递。
  • 子组件传递父组件的方式,使用emit方法。
  • 装饰性使用父组件传递属性,可以使用computed中的get属性,进行数据修饰转换。
  • el-dialog作为子组件,调用emit方法时,需要在befor-close属性中,首先定义方法,再调用emit。
      
      
  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值