vue 子组件修改props引用类型参数引发的思考

栏目: 编程语言 · 发布时间: 6年前

内容简介:父级组件与子组件的通信一般都是通过props来实现的,因为数据流向的单一才能保证数据变化的可追踪性,在vue中props遵循的是单向数据流,原则上子组件修改props是不被允许的。但是当props传递的参数为对象或者数组的时候,是通过引用传入的,所以对于一个引用类型的prop来说,在子组件中改变这个参数本身将会影响到父组件的数据状态。更关键的是,我们打开控制台,会发现完全没有报错...这就会导致父组件的data混乱,而且难以捕捉,所以对于这种情况可以这样处理。

问题

父级组件与子组件的通信一般都是通过props来实现的,因为数据流向的单一才能保证数据变化的可追踪性,在vue中props遵循的是单向数据流,原则上子组件修改props是不被允许的。

但是当props传递的参数为对象或者数组的时候,是通过引用传入的,所以对于一个引用类型的prop来说,在子组件中改变这个参数本身将会影响到父组件的数据状态。更关键的是,我们打开控制台,会发现完全没有报错...

这就会导致父组件的data混乱,而且难以捕捉,所以对于这种情况可以这样处理。

解决方案

在子组件中声明新变量,然后把prop深拷贝赋值给新变量,之后子组件就使用新变量。

但是这种情况下父组件改变参数时,子组件无法更新参数,需要时可以通过watch或者computed来实现实时更新


以上就是本文的全部内容,希望本文的内容对大家的学习或者工作能带来一定的帮助,也希望大家多多支持 码农网

查看所有标签

猜你喜欢:

本站部分资源来源于网络,本站转载出于传递更多信息之目的,版权归原作者或者来源机构所有,如转载稿涉及版权问题,请联系我们

测试驱动开发的艺术

测试驱动开发的艺术

Lasse Koskela / 李贝 / 人民邮电出版社 / 20101023 / 59.00元

在传统的软件开发中,开发人员对于代码是否正确心中无底,一切依赖于后期的测试环节。极限编程反其道而行之,主张采用测试驱动开发(TDD)的方法,即通过测试定义所要开发的功能的接口,然后实现功能的开发过程。TDD通过不断地测试推动代码的开发,既简化了代码,又保证了软件质量。 本书采用“手把手”的教学方式,通过大量实例来解释TDD,还专门用几章的篇幅来讲解如何为难于测试的技术编写单元测试。全书内容循......一起来看看 《测试驱动开发的艺术》 这本书的介绍吧!

RGB转16进制工具
RGB转16进制工具

RGB HEX 互转工具

图片转BASE64编码
图片转BASE64编码

在线图片转Base64编码工具