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

28次阅读

共计 333 个字符,预计需要花费 1 分钟才能阅读完成。

问题

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

解决方案

在子组件中声明新变量,然后把 prop 深拷贝赋值给新变量,之后子组件就使用新变量。
但是这种情况下父组件改变参数时,子组件无法更新参数,需要时可以通过 watch 或者 computed 来实现实时更新

正文完
 0