vue 父组件调用子组件方法

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

• $emit、$on 方式
  参考[子组件调用父组件方法]的第二种方法。

• 通过ref直接调用子组件方法

  //父组件
  <consumption-table
  ref=“consumptionTable”
  :billDate=“billDate”

  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”
   >
   

   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();