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页面也会随之发生变化。

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