Angular子组件向父组件传值时数据为undefined问题排查

嘿，我一眼就发现问题所在了！你父组件接收子组件数据时用错了参数变量名。

核心错误点 #

在Angular的事件绑定规则里，子组件通过EventEmitter发射的数据，父组件需要用**$event**这个内置变量来接收，而你代码里写的是$data——这不是Angular认可的变量，所以父组件自然拿不到任何数据，只能得到undefined。

修改步骤 #

把父组件模板里的事件绑定代码改一下就行：

错误的父组件模板代码 #

<left-panel mainTitle="Add a tea" addBtnText="Add tea" (addTeaEvent)="handleAddTeaEvent($data)"></left-panel>

修正后的父组件模板代码 #

<left-panel mainTitle="Add a tea" addBtnText="Add tea" (addTeaEvent)="handleAddTeaEvent($event)"></left-panel>

额外验证建议 #

为了确保万无一失，你可以在子组件的handleAddTea方法里多打印一行，确认this.mainTitle本身不是undefined：

handleAddTea() {
  console.log('Add Tea Clicked sending to parent..', this.mainTitle); // 新增这行，确认数据存在
  this.addTeaEvent.emit(this.mainTitle);
}

这样修改后，父组件就能正常接收到子组件传递的mainTitle数据了！

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