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

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

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

问题

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

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

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

解决方案

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

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


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

查看所有标签

猜你喜欢:

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

Windows 程序设计:第5版

Windows 程序设计:第5版

CharlesPetzold / 北京博彦科技发展有限公司 / 北京大学出版社 / 2003-11-1 / 160.00元

Windows程序设计(第5版)对于Windows程序员来说,“从 Charles 的(Windows程序设计)一书中寻找答案。”几乎成了一句至理名言。而(Windows程序设计》第5版是专门为在Microsoft Windows 98、Microsoft Windows NT 4和 Windows NT 5下编程的开发人员编写的。内容博大精深,并有大量的源代码来帮助读者掌握Windows编程。本......一起来看看 《Windows 程序设计:第5版》 这本书的介绍吧!

HTML 压缩/解压工具
HTML 压缩/解压工具

在线压缩/解压 HTML 代码

CSS 压缩/解压工具
CSS 压缩/解压工具

在线压缩/解压 CSS 代码

HSV CMYK 转换工具
HSV CMYK 转换工具

HSV CMYK互换工具