vue父组件调用子组件的方法会发生有意思的现象......

81 阅读1分钟

场景:父组件展示会议信息,可以增加会议和编辑会议。

实现:增加会议和编辑会议抽一个组件(主要内容就是表单)

image.png

image.png

有意思的现象:点击编辑,调用子组件的方法,在编辑会议信息时,父组件信息也会修改。

image.png

image.png

原因:直接用父组件传过来的参数,赋值给子组件,参数是数组,传过来的是内存地址,结果就是它们指向同一个地址,所以修改的时候就会展示到两个地方。

image.png 在这个场景里,在编辑的情况下修改,也会映射到父组件的显示中,点击删除,父组件也会删除对应的显示。

如果不想这样,就在赋值的时候把数组参数展开一下,就不会同步展示了

image.png

总结:赋值变量的时候,如果是对象类型的数据,赋值的是内存地址,而不是对应的值。