Vue单向数据流(不建议修改props)

537 阅读1分钟

在使用Vue组件通信是经常会出现以下此类错误:

image.png

在vue中需要遵循单向数据流原则

所以什么是单向数据流:

向单项数据流指的是,在父传子的前提下,父组件里面的数据发生改变会带动子组件里的数据进行更新。 那么反过来对子组件里的props进行修改是否可以影响父组件里的数据进行改变呢? 遵循单向数据流示例代码如下: image.png

运行后:此时代码并不会报错 image.png

违背单向数据流示例代码如下:

image.png

运行后: 此时代码会报错,但是会正常运行,后续会影响代码运行

image.png

特殊说明:父组件传给子组件的是一个对象,子组件修改对象的属性,是不会报错的,对象是引用类型, 互相更新;但不能改变引用地址 image.png

运行后: 此时代码不会报错,会正常运行。

image.png

总结:props的值不能重新赋值, 但是引用类型可以子改父