在v-on绑定的异步函数执行完成后触发子组件事件

下面给你几种实用的实现方式：

方案一：父组件直接调用子组件方法 #

1. 给子组件添加ref标识，让父组件能获取到子组件实例：

<Test @data="fn" ref="testComponent" />

2. 父组件中处理异步函数fn，执行完成后调用子组件的指定方法：

async fn() {
  // 执行异步逻辑，比如接口请求
  await fetchSomeData();
  // 调用子组件的目标方法
  this.$refs.testComponent.triggerAction();
}

3. 子组件中定义需要触发的操作方法：

<script>
export default {
  methods: {
    triggerAction() {
      // 这里编写子组件要执行的操作
      console.log("父组件异步函数已完成，子组件触发操作");
    }
  }
}
</script>

方案二：通过状态prop传递+子组件监听 #

1. 父组件定义状态变量，异步函数执行完毕后更新状态：

<template>
  <Test @data="fn" :asyncTaskDone="asyncTaskDone" />
</template>

<script>
export default {
  data() {
    return {
      asyncTaskDone: false
    }
  },
  methods: {
    async fn() {
      await fetchSomeData();
      this.asyncTaskDone = true;
      // 如果需要重复触发，可在操作后重置状态
      // setTimeout(() => this.asyncTaskDone = false, 0);
    }
  }
}
</script>

2. 子组件监听asyncTaskDone的变化，触发对应操作：

<script>
export default {
  props: {
    asyncTaskDone: {
      type: Boolean,
      default: false
    }
  },
  watch: {
    asyncTaskDone(newVal) {
      if (newVal) {
        // 执行子组件操作
        this.handleAsyncDone();
        // 可选：通知父组件重置状态
        // this.$emit('resetAsyncState');
      }
    }
  },
  methods: {
    handleAsyncDone() {
      console.log("响应父组件异步完成事件");
    }
  }
}
</script>

方案三：利用Promise回调（子组件主动触发场景） #

如果是子组件触发@data事件，可让父组件的fn返回Promise，子组件等待Promise完成后执行操作：

1. 父组件的fn返回Promise：

async fn() {
  await fetchSomeData();
  return Promise.resolve();
}

2. 子组件触发事件时等待Promise完成：

<script>
export default {
  methods: {
    callParentFn() {
      // 触发父组件事件并等待异步完成
      this.$emit('data').then(() => {
        // 父组件异步完成后执行子组件操作
        this.runChildAction();
      });
    },
    runChildAction() {
      console.log("父组件异步函数执行完毕，子组件操作触发");
    }
  }
}
</script>

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