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

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

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

问题

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

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

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

解决方案

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

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


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

查看所有标签

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

群体的智慧

群体的智慧

[美] 詹姆斯·索罗维基 / 王宝泉 / 中信出版社 / 2010-10 / 33.00元

《纽约时报》榜首畅销书,《商业周刊》《福布斯》杂志最佳商业图书 21世纪商务人士必读书,了解群体智慧时代的决策模式 告诉我们如何过日子、如何选择领导人、如何做生意以及如何思考这个世界 我们当中的大多数人,不论是选民还是投资者,是客户还是经理人,似乎都相信宝贵的知识掌握在少数人手中,认为精英们做出的决策更加聪明,很少有人相信“乌合之众”也能像专家那样做得如此出色。 但《纽约客......一起来看看 《群体的智慧》 这本书的介绍吧!

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

RGB HEX 互转工具

HEX CMYK 转换工具
HEX CMYK 转换工具

HEX CMYK 互转工具

HEX HSV 转换工具
HEX HSV 转换工具

HEX HSV 互换工具