父子传值prop,区分基本类型和引用类型

107 阅读1分钟
父给子传基本类型:

子组件中可以直接修改props中接收的值,并且不影响父组件中的这个值(二者不相互影响),但是会报警告(需要通过$emit间接修改)。

父给子传引用类型:(父给子传递了一个object,a{b:100})

父给子传递对象:

1、子组件中修改this.a.b = 200,这样父组件中的b同时被修改(传递引用类型是一个浅拷贝的关系,所以会互相影响),不会报警告。
2、如果子组件中修改的是props中的值:this.a,那么会报警告(需要通过$emit间接修改),子组件中的a.b被修改,父组件中的a.b仍然是原来的值,不被影响

**父给子传递数组: **

image.png

1、子组件中修改props的值,不会影响父组件,会报警告($emit)。

image.png

image.png

image.png

2、子组件修改props的值中的某个具体值:(父子组件都不会被修改)

image.png 父子组件中的数据都不会被改变。

综合:
子组件内修改props中的值(无论是基本类型还是引用类型),子组件中的值被成功修改,并且不影响父组件中的值,但是会报警告。
如果传递的是对象,子组件中修改的是对象中的值,那么父子组件中的这个值都会被同时修改(浅拷贝,b的指针变了),并且不会报警告。