js数据赋值后出现两对象数据联动问题

最新推荐文章于 2024-09-03 16:51:17 发布

我一直都在你身边

最新推荐文章于 2024-09-03 16:51:17 发布

阅读量997

点赞数

分类专栏： JS vue 文章标签：堆栈数据赋值后联动

本文链接：https://blog.csdn.net/woyizhidouzai0505/article/details/90401512

版权

JS 同时被 2 个专栏收录

4 篇文章 0 订阅

订阅专栏

vue

2 篇文章 0 订阅

订阅专栏

最近在用Vue写页面，有一个页面需求如下：用一个父页面嵌套了两个表单子页面，子页面中的表单字段相差不多（有部分字段需复用）。初始时默认开启第一个表单（第二个表单项未开启），填写部分数据后，如果再开启第二个表单，需要将第一个表单中已填写的可复用项拷贝到第二个表单中（不需要再重复选择），之后两个表单间不再有联动，各改各的！！！

就是上面那段红字出问题了！！！

首先看下页面想要实现的效果：

父页面同步实现，想要在某个子页面启用时，实现一次复制数据，但是在数据复制后，两个子表单页面中的数据居然出现了联动【改上面表单中的A数据，下面表单中的A数据也会一起变化】，我去咧，想要这种效果的时候没有，现在给我整事！！！

<div v-if="showVisitView">
   <fund-visit ref="visitView" :pdata="copyfromAct"></fund-visit>
</div>

<div v-if="showActView">
  <fund-activity  ref="actView" :pdata="copyfromVisit"></fund-activity>
</div>

<script>
computed:{
            copyfromAct(){
                return JSON.stringify((this.showActView && this.$refs["actView"])?this.$refs["actView"].store:{});
            },
            copyfromVisit(){
                return JSON.stringify((this.showVisitView && this.$refs["visitView"])?this.$refs["visitView"].store:{});
            }
        }
</script>

逻辑一点点排查，确认了属性名重复、代码逻辑重复、对象关联等情况，都没效果，

最后的最后，终于找到了这篇文章，茅塞顿开呀，还是堆栈没学好！！！：

https://www.jianshu.com/p/32d44a047b07

原理很简单，就是js的堆栈：