Vue关于使用JSON parse和Stringly解决数据双向流动的问题
最近,在完成公司项目某模块的时候,遇到这样一个授权需求。需要在B 页面内选中某一条数据,然后关闭B页面后,A页面上tables也会出现B页面内选中的信息。然后,当B页面重新打开后,B页面需要重新映射回选中的那些属性信息。在完成这个需求的时候,出现这样一个问题。在B页面选择想要授权的信息后,还未确认,A页面上也会同时生产授权信息。A页面为父组件,B页面为子组件。A页面是通...
·
最近,在完成公司项目某模块的时候,遇到这样一个授权需求。需要在B 页面内选中某一条数据,然后关闭B页面后,A页面上tables也会出现B页面内选中的信息。然后,当B页面重新打开后,B页面需要重新映射回选中的那些属性信息。
在完成这个需求的时候,出现这样一个问题。
在B页面选择想要授权的信息后,还未确认,A页面上也会同时生产授权信息。
A页面为父组件,B页面为子组件。A页面是通过调用B页面的方法进行传值的。代码如下
this.$ref.test.diliverData(this.rowS);
diliverData 是B页面的方法。this.rowS是A页面tables的所有信息集合。
B页面如此接收
diliverData(val){
this.checkedRow = val ;
}
而这时候,如果我重新打开B页面,想要添加新的信息时,B页面点击后,A页面也会随之发生变化。
研究以后,发现这是由A页面所传递的this.rowS是一个对象,而B页面接收的也是一个对象,即深拷贝。这样的话,无论在B页面如何修改rows的值,A页面也会发生变化,因为修改的是同一个对象。
如何解决呢?
使用JSON 的Stringly和Prase进行封装和解析。
A页面:
this.$ref.test.diliverData(JSON.Stringly(this.rows));
B页面:
this.checkedRow = JSON.prase(val);
更多推荐
已为社区贡献1条内容
所有评论(0)