vue中通过组件传值给echarts赋值,无法正常渲染页面图表-解决

导致问题

<v-zxt class="zxt" :rateObj02="rateObj02" v-if="isZxt"></v-zxt>

data(){
    return{
      rateObj02:{},//收缴率
    }
  },

rateObj02中没有设置任何默认属性,这个就是导致问题的关键

改进

rateObj02:{
        comName:["青岛分公司", "杨浦分公司", "广州分公司", "杭州分公司", "苏州分公司", "郑州分公司"],
        yearRank:[81, 82, 82, 88, 92, 100],
      },

设置默认属性值,然后通过网络请求更新对应的值,子组件就可以监听到值的变化了

子组件监听数据

props: ["rateObj02"],
//监听数据变化
    // 传值无法正常监听,先在父组件中添加好对应的静态数据,再通过请求更新数据即可
    rateObj02: {
      handler(newVal, oldVal) {
        console.log(newVal,oldVal,'watch')
        if(newVal){
          this.setCate(newVal);
        }else{
          this.setCate(oldVal);
        }
      },
      deep: true,
        // immediate: true
    },

 

posted @ 2020-12-04 09:31  JackieDYH  阅读(39)  评论(0编辑  收藏  举报  来源