vue中父组件如何调用子组件的方法

场景

• 在父组件中的数据变化时，可能子组件中的展现形式是不能通过响应式改变的，比如chart图表，虽然chart子组件中已经拿到了更新后的数据，但是需要重绘才能重新展现，这时候就可以用父组件调子组件中的重绘方法，来实现。

解决

• 子组件里的方法就正常声明再methods里，比如，有一个chart组件

  ···
  methond: {
    redraw () {
      console.log(this.dataFromFather) // 这里props中的数据已经响应改变了
      this.drawWave() // 然后canvas清空画布，重绘，或者echarts重新setOption
    }
  }
  ···
  

• 在父组件中给组件标签处加一个ref

  <MyCom :dataFromFather="data" ref="sonDom"></MyCom>
  

• 然后在父组件中数据变化后，用$refs调用子组件的方法

  ···
  const that = this
  getData(param).then(res => { // 这里getData是调后台接口
    if(res.code === 0){
      that.data = res.data
      that.$nextTick(() => {
        that.$refs.sonDom.redraw() // 调用子组件的redraw方法
      })
    }
  })
  ···