vue 父组件调用子组件方法

最近项目中用到的父子组件间的调用挺频繁的，整理下，方便以后查找。

• $emit、$on 方式
  参考子组件调用父组件方法的第二种方法。
• 通过ref直接调用子组件方法

//父组件
 <consumption-table
            ref="consumptionTable"
            :billDate="billDate"
 ></consumption-table>

this.$refs.consumptionTable.getData();

//子组件
 props: {
    billDate: {
      type: String,
      default: new Date().toLocaleDateString().substr(0, 7).replace("/", "-"),
    }
  },
  methods: {
    async getData() {
        const res = await this.$API(url, {
            month: this.billDate
        });
        if (res.code === 10000) {
            console.log('success')
        }
    }
}

可能会出现的问题：

1. 如果父组件中改变了billDate，又调用了子组件的getData方法时，比如：

 <el-date-picker
        v-model="billDate"
        type="month"
        :style="'width:189px'"
        placeholder="选择日期"
        value-format="yyyy-MM"
        @change="changeDate"
      >
      </el-date-picker>

changeDate(date) {
    this.$refs.consumptionTable.getData();
}

子组件发送请求时会出现billDate没有更新的情况。

查了下官网，可以使用nextTick：在下次 DOM 更新循环结束之后执行延迟回调。在修改数据之后立即使用这个方法，可以获取更新后的 DOM。

更详细的介绍：异步更新队列。

so,changeDate里这样写就好了：

 this.$nextTick(() => { 
      this.$refs.consumptionTable.getData();
 });

2. 如果consumptionTable的外面是一层循环，通过ref获取的consumptionTable就是一个数组，需要通过相应的index去调用对应的getData方法。
   index

this.$refs.consumptionTable[0].getData();