vue中echarts父子组件异步传值

        最近在使用echarts进行数据展示的时候，遇到了一个问题。echarts图表是作为子组件进行展示的，需要父组件发送请求并获取到返回数据后再传给子组件进行数据展示，但是由于子组件比父组件先渲染，所以就会导致子组件获取不到父组件传递的数据。针对这个问题，可以使用vue中的watch监视来解决。

        首先，在父组件中引入子组件并注册

import bar from './bar.vue'

components:{

        bar

}

        其次，将数据传递给子组件

<bar :num='num'></bar>

        在子组件中，通过props接收父组件的数据，并通过watch监听

props: {

    num:{

      type:Object

    }

    deep:true  //最好加上，如果num是个数组类型的，没有deep监视不到

}

watch:{

   num(val){

     this.data = val

     this.initData()    

  }

},

methods:{

  initData(){

        渲染图表

}

}

 通过watch监听，子组件在监听到num的变化后赋值给data,这样就可以根据data进行图表的渲染。