Vue中子组件调用$emit向父组件传值报undefined错误如何解决

报错根因 #

你遇到的$emit报错不是API用法本身错误，是**this指向异常**：你在fetch的then回调中使用了普通函数声明，普通函数的this会指向调用时的上下文，回调执行时this已经不是Vue组件实例，自然找不到$emit属性。

分步修复代码 #

1. 修正子组件代码 #

需要同时修改3个问题：

• 把then的普通函数替换为箭头函数，箭头函数会继承外层作用域的this，也就是当前组件实例
• 子组件不需要定义translatedText prop，该属性是父组件要接收的变量，子组件无需提前接收
• 接口返回值是then的入参data，不要加this前缀，this.data默认是undefined

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

<script>
export default {
  name: "TranslationButton",
  methods: {
     loadTranslations() { 
      fetch('http://localhost:3000/ccenter/cc_apis')
        .then(response => response.text())
        .then(data => {
          console.log(data);
          this.$emit('translatedText', data);
        })
      },
  },
};
</script>

2. 修正父组件逻辑 #

首先注意：translatedText是父组件内部需要修改的变量，不能定义在props中，props是父组件传给子组件的只读属性，需要把它移到data里。

// 父组件属性修正
props: {
  data: Array,
  showAttachments: {
    type: Boolean,
    default: false,
  }
},
data() {
  return {
    translatedText: '' // 内部可修改变量放data中
  }
},
methods: {
  loadTranslations(returnData) {
    // 将子组件传过来的接口结果赋值给自身变量
    this.translatedText = returnData
  }
}

3. 修正父组件调用子组件的代码 #

监听自定义事件时不要给方法加空括号，加括号会直接执行方法，无法拿到子组件传递的参数，直接写方法名即可：

<translation-button  @translatedText="loadTranslations" />

$emit是否是当前场景最优方案？ #

是最优方案。当前场景下子组件是通用按钮组件，通过自定义事件传值符合Vue单向数据流规范，父子组件没有强耦合，职责拆分清晰，维护成本很低。只有当翻译结果需要在多个无关联的全局组件中共享时，才需要考虑用Vuex/Pinia这类全局状态管理存储结果，否则用$emit完全满足需求。

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