Vue关于使用JSON parse和Stringly解决数据双向流动的问题

  最近,在完成公司项目某模块的时候,遇到这样一个授权需求。需要在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页面也会随之发生变化。

扫描二维码关注公众号,回复: 5910076 查看本文章

研究以后,发现这是由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);

猜你喜欢

转载自blog.csdn.net/Wicd123/article/details/89030555