Vue父组件如何调用子组件方法并获取方法返回值

场景说明 #

父子组件结构下，父组件需要主动调用子组件的onSubmit方法，拿到方法执行结果后做条件分支判断，直接调用无返回值的问题分两种场景处理：

场景1：子组件onSubmit为同步逻辑 #

你现有代码的核心问题是调用方法后没有手动接收返回值，不存在拿不到同步返回的问题，直接用变量接收方法执行结果即可。

修正代码 #

父组件方法修改：

// parent method
methods: {
     callChildMethod() {
        // 接收子组件同步方法的返回值
        const response = this.$refs.childform.onSubmit()
        // 直接做条件判断
        if (response) {
            // 返回值为真的分支逻辑
        } else {
            // 返回值为假的分支逻辑，对应你子组件return false的场景
        }
      },
}

子组件原有同步逻辑无需修改，正常return结果即可：

//child method
methods: {
    onSubmit() {
      // 同步表单校验、数据处理等逻辑
      return false
    },
}

注意：调用时需确保子组件已经完成挂载，不要在父组件created钩子中调用$refs，此时DOM还未渲染，ref实例不存在，放在mounted钩子、用户点击事件等触发时机下即可。

场景2：子组件onSubmit为异步逻辑（接口请求、异步校验等） #

如果子组件方法里包含异步操作（比如表单异步校验、接口提交），同步接收变量会拿到Promise状态对象，拿不到最终执行结果，需要配合async/await处理。

修正代码 #

子组件方法返回Promise（直接加async修饰即可，async方法默认返回Promise）：

// child 异步方法
methods: {
    async onSubmit() {
      try {
        // 示例：异步表单校验、提交接口
        await this.$refs.form.validate()
        const submitResult = await axios.post('/api/submitForm', this.formData)
        // 异步操作成功，返回成功标识和数据
        return { success: true, data: submitResult }
      } catch (error) {
        // 校验/请求失败，返回失败标识
        return { success: false, error }
      }
    },
}

父组件方法加async修饰，等待子组件异步方法执行完成后再做判断：

// parent method
methods: {
     async callChildMethod() {
        // 等待异步方法执行完毕，拿到最终返回结果
        const response = await this.$refs.childform.onSubmit()
        if (response.success) {
            // 提交成功逻辑：提示、路由跳转等
        } else {
            // 提交失败逻辑：错误提示等
        }
      },
}

避坑点 #

• 不要为了拿返回值额外加$emit自定义事件监听，$emit适合子组件主动触发父组件逻辑的场景，主动调用子方法拿返回值的场景下，直接接收返回值/Promise是最简洁的实现，没有额外通信成本。
• 如果子组件用v-if控制显隐、或者放在<keep-alive>缓存中，要确保调用方法时子组件处于渲染状态，否则$refs.childform会是undefined，调用方法会报错。

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