Vue开发：如何将Fetch接口返回结果从子组件传递到父组件TranslatedText属性

原代码核心问题 #

• 父组件配置错误：translatedText 不应该定义为父组件的prop，应该定义为父组件自身的响应式状态（data/computed），用于存储子组件返回的翻译结果
• v-model适配问题：Vue默认v-model约定子组件接收value prop，触发input事件回传值，你的事件名和prop名不符合约定
• 子组件this指向错误：fetch的回调用了普通函数声明，导致内部this不指向Vue实例，无法正常调用$emit方法
• 传值逻辑错误：你拿到接口返回的data后没有放入emit的参数，反而传了子组件原本接收的空prop，自然无法传递正确值
• 事件触发时机错误：你把emit放在finally里，即使接口请求失败也会触发回传，建议放到请求成功的回调里

重构后代码 #

父组件 ParentComponent.vue #

<template>
  <!-- 两种写法选一种即可 -->
  <!-- 写法1：用v-model适配Vue默认双向绑定约定 -->
  <translation-button v-model="translatedText" />
  
  <!-- 写法2：自定义事件监听，语义更清晰，不需要套v-model逻辑 -->
  <!-- <translation-button @translation-success="translatedText = $event" /> -->
</template>

<script>
import TranslationButton from './ChildComponent.vue'
export default {
  components: { TranslationButton },
  // translatedText是父组件自己的响应式状态，不是prop
  data() {
    return {
      translatedText: ''
    }
  }
}
</script>

子组件 ChildComponent.vue #

<template>
  <b-button type="is-primary" @click="loadTranslations">Übersetzen</b-button>
</template>

<script>
export default {
  name: "TranslationButton",
  // 如果用v-model写法需要保留该prop，自定义事件写法可以直接删掉
  props: {
    value: String
  },
  methods: {
    async loadTranslations() {
      try {
        const response = await fetch('http://localhost:3000/ccenter/cc_apis')
        const data = await response.text()
        console.log('接口返回结果：', data)
        // 回传接口返回的data给父组件
        // v-model写法触发input事件
        this.$emit('input', data)
        // 自定义事件写法触发translation-success事件
        // this.$emit('translation-success', data)
      } catch (err) {
        console.error('翻译接口请求失败：', err)
      } finally {
        console.log('请求流程结束')
      }
    }
  }
}
</script>

补充说明 #

如果你的场景不需要子组件接收父组件的初始翻译值，完全可以删掉子组件的props定义，只保留事件回传逻辑即可，不需要强行套表单输入场景的v-model双向绑定逻辑，单向事件传递就可以满足需求。

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