美文网首页
解决Vue父传子,子组件Prop参数及时跟新问题

解决Vue父传子,子组件Prop参数及时跟新问题

作者: royluck | 来源:发表于2019-07-05 11:34 被阅读0次
    子组件:
    watch: {
        random (val) {
            this.pieTipArr = this.chartData.rows.map((e, idx) => {
              return {
                ...e,
                color: this.chartColors[idx],
                percent: parseInt(((e.统计数量 / this.total).toFixed(2)) * 100) + '%'
              }
            })
          }
        },
    
    父组件:
    <PieChart :chartData="pieChartData" :total="pieChartTotal" v-if="pieChartTotal"/>
    
    data(){
      return {
            // 饼图数据
            pieChartData: {
              columns: ['统计内容', '统计数量'],
              random: '',   // 组件刷新
              rows: [
                { '统计内容': '按时完成: 210', '统计数量': 150 },
                { '统计内容': '超期任务: 24', '统计数量': 120 },
                { '统计内容': '未完成任务: 12', '统计数量': 56 },
              ]
            },
      }
    }
    
    methods:{
                ...
                // 饼图
                let data = []
                // 对象转数组
                for(let i in e.data){
                  if(i == 'task_finish_count' ||i == 'task_expire_count' || i == 'task_unfinish_count'){
                    let obj = {
                      desc: i == 'task_finish_count' ? '按时完成' : i == 'task_expire_count' ? '超期任务' : '未完成任务',
                      percent: e.data[i]
                    }
                    data.push(obj)
                  }
                }
                data.forEach((e,idx)=>{
                  let obj = {
                    ...e,
                    '统计内容': e.desc,
                    '统计数量': e.percent
                  }
                  that.$set(that.pieChartData.rows,idx,obj)
                })
                let random = Math.random()  // 随机数<<<<<<<<<<<<<<<<<<<(关键)
                that.$set(that.pieChartData,'random',random)
                that.pieChartTotal = that.pieChartData.rows.map(e=>{
                  return e.统计数量
                }).reduce((total,num)=>{
                  return total+num
                })
    }
    
    

    或许有更好的方法,感觉这种方法,太繁琐了

    相关文章

      网友评论

          本文标题:解决Vue父传子,子组件Prop参数及时跟新问题

          本文链接:https://www.haomeiwen.com/subject/vyushctx.html