業(yè)務(wù)背景

模仿拼多多的搶購進度條效果,如下

• 商品列表是一個組件goods,循環(huán)渲染一個商品
• 進度條是一個組件progress,在商品列表的循環(huán)中進行引入

遇到的困難

• 渲染組件時,進度條組件mounted鉤子里面打印的值分別是30 90
• 最終渲染完成后
• 每個商品的進度條數(shù)據(jù)都是取的最后一個商品的進度條數(shù)據(jù)90

示例代碼

index.vue

<template>
  <goods :list.sync="list"></goods>
</template>
<script>
  import goods from 'componects/goods';
  data () {
    return {
      list:[
        {name:'xx', progress: 30},
        {name:'bb', progress: 90},
      ]
    }
  }
  components: {
    goods
  }
  ...
</scrip>

goods.vue

<template>
  <div>
    <div v-for='item in list'>
      ...
      <progress :number="item.progress"></progress>
      ...
    </div>
  </div>
</template>
<script>
  import progress from './progress';
  props: {
      list: Array
  }
  components: {
    progress
  }
  ...
</scrip>

progress.vue

<template>
  <div :progress="progress"> 進度條 </div>
</template>
<script>
  props: {
    progress: 0
  },
  mounted () {
    console.log(this.progress); // => 30,90
  }
</script>

問題

• 為什么會產(chǎn)生這樣的問題?(感覺和閉包引用的問題一樣)
• 有什么樣的解決方法?