Vue.js：父组件函数执行完成后调用子组件函数的问题

首先得明确一点：如果functionParent()是同步函数，理论上按你写的顺序应该是父函数先执行完，再调用子组件函数。但你遇到子函数先执行的情况，大概率是functionParent()内部包含了异步操作（比如API请求、setTimeout、Promise等）——异步操作会被放入事件队列，主线程会先执行后续的functionChild()，等异步任务完成后才继续处理父函数的剩余逻辑，所以看起来子函数先跑完了。

下面给你两种靠谱的解决方案，都能确保父函数完全执行（包括异步部分）后再触发子函数：

方法一：用Async/Await处理异步（推荐） #

如果你的functionParent()可以修改，让它返回一个Promise（用async/await语法最直观）：

步骤1：修改父组件的functionParent #

async functionParent() {
  // 比如这里是你的异步操作，比如接口请求
  await axios.get('/your-api-url');
  
  // 其他同步逻辑...
}

步骤2：在父组件中单独定义点击处理方法（同时解决箭头函数的不良实践） #

先把按钮的点击事件改成绑定一个方法：

<btn @click.native="handleButtonClick">Call functions</btn>

然后在父组件的methods里实现这个方法：

async handleButtonClick() {
  // 等待父函数完全执行完毕
  await this.functionParent();
  // 再调用子组件的函数
  this.$refs.childComponent.functionChild();
}

这样就能严格保证执行顺序，代码也更清晰易维护。

方法二：用回调函数兼容现有代码 #

如果functionParent()不方便改成异步函数，可以给它加一个回调参数，在异步操作完成后触发回调：

步骤1：修改父组件的functionParent #

functionParent(onComplete) {
  // 模拟异步操作，比如接口请求或者setTimeout
  setTimeout(() => {
    // 父函数的核心逻辑处理完毕
    console.log('父函数逻辑执行完成');
    // 触发回调
    onComplete();
  }, 1000);
}

步骤2：实现点击处理方法 #

同样先绑定按钮到方法：

<btn @click.native="handleButtonClick">Call functions</btn>

然后在methods里：

handleButtonClick() {
  this.functionParent(() => {
    // 回调里调用子组件函数，确保父函数已经执行完
    this.$refs.childComponent.functionChild();
  });
}

额外提醒 #

你提到的@click里用箭头函数是不良实践，改成上面这种单独定义方法的方式就完美解决了——不仅符合Vue的最佳实践，也让代码更易调试和复用。

内容的提问来源于stack exchange，提问作者gileneusz