美文网首页
解决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参数及时跟新问题

    子组件: 父组件: 或许有更好的方法,感觉这种方法,太繁琐了

  • Vue父子组件传值

    父传子 父组件 Father.vue 子组件 Son.vue 子传父 子组件 Son.vue 父组件 ...

  • Vue 父组件 传值 给子组件

    父传子 父组件: 引入子组件 子组件使用 自定义属性接收 父组件的数据 子组件: prop接收父组件的值 (推荐使...

  • 2019-03-13

    vue父子组件传值,(父组件向子组件传值用prop ,子组件向父组件传值:子组件调用父组件方法值以参数的方式传递)...

  • 2019-03-13

    vue父子组件传值,(父组件向子组件传值用prop ,子组件向父组件传值:子组件调用父组件方法值以参数的方式传递)...

  • uniapp-组件通讯

    1.父传子 prop 属性绑定, 子组件通过prop属性childrenData可以接受到父组件中绑定的值:chi...

  • vue 组件之间传值 父传子 子传父 todolist

    vue 组件之间传值 父传子 子传父 todolist

  • vue的基本知识点总结

    组件通信 1、父传子 父组件: // 动态绑定值用v-bind 例子中的“:”为简写子组件:prop...

  • props、vuex、bus(Eventbus)、事件订阅obs

    前沿:在前端VUE中传参方式无非就是父传子、子传父、多个组件状态共享 父传子 传递:当子组件中在父组件中当做标签使...

  • vue 组件通信

    本文主要解决vue组件之间的通信问题 Prop 向下传递,事件向上传递 Prop (主要用于父组件向子组件下发数据...

网友评论

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

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