vue的v-for中循环修改变量（this.xxx）的给子组件传值覆盖重复的问题

HD243608836

于 2023-10-20 15:31:05 发布

阅读量1.1k

点赞数

CC 4.0 BY-SA版权

分类专栏： vue 文章标签： vue 循环 for 修改子组件传值覆盖

本文链接：https://blog.csdn.net/HD243608836/article/details/133942500

vue 专栏收录该内容

45 篇文章

订阅专栏

博客主要讲述了在Vue中使用v-for循环向子组件传值时遇到的问题。使用v-for根据不同item修改变量并传值到子组件，结果值全重复。原因是v-for最后统一调用传值，变量被多次修改且是浅拷贝。解决办法是改为深拷贝，让每次循环使用新的局部变量。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

遇到问题

使用v-for，其中需要根据不同的item修改某个变量(this.xxx)，然后向子组件中传值，但是发现传到子组件中的值却全是重复一样的：

我们循环qsList，其中<qs-form>是我自定义的一个组件，想向该子组件中传值

<el-tab-pane v-for="(item, index) in qsList" :key="index" :name="String(index+1)" :label="item.name">
  <qs-form :qs-config="setQsConfig(item.key)"/>
 </div>
</el-tab-pane>

data() {
  return { 
    qsConfig: {
      qsKey: '',
      preview: false,
      showBtns: true,
    },
  }
}

...
...
methods: {
  setQseConfig(key){
    // console.log(">>>",key)
    // 问题就出在这里
    this.qsConfig.qsKey=key
    return this.qsConfig
  },
}

猜想一下：
vue的v-for是最后统一调用给子组件传值，而不是每次执行就调用传值一次！所以变量会在被传值到子组件之前，会被一直修改 list.length 次。而底层逻辑应该是就是“浅拷贝”变量，即引用地址都是指向那同一个地址。

所以我们修改为“深拷贝”，让循环中每次都是新的局部变量，互相不影响！

解决办法

修改为如下“深拷贝”代码即可：

setQsConfig(key){
  // console.log(">>>", key)
  // 深拷贝，避免使用同一个变量，导致循环修改同一变量的值覆盖问题
  let qc = {...this.qsConfig}
  qc.qsKey = key
  return qc
}