Vue组件emit仅首次生效：递归组件链传值异常排查

核心原因 #

问题出在递归组件A的事件传递链断裂：
你仅给最顶层的<component-a>绑定了@change-parent-reactive-data="setReactive"，但递归渲染的子级<component-a>（即组件A内部嵌套的自身实例）未绑定对应的事件监听。当子级A中的组件B触发emit时，子级A虽能接收事件并再次emit，但该emit的接收者是它的父级A，而父级A并未监听这个事件，导致事件无法继续向上传递到顶层视图。

从控制台输出也能佐证：第一次触发的是最顶层A的组件B，事件能完整传递到视图；后续触发的是递归层级里的组件B，事件只能传到对应的父级A，之后就中断了。

解决方案 #

在组件A的模板中，递归渲染自身时必须添加事件监听，确保事件能逐层向上传递：

修正组件A的模板代码 #

<template>
  <!-- 组件B的绑定保持不变 -->
  <component-b @change-parent-reactive-data="emitToParent" />

  <!-- 递归渲染组件A的部分，添加事件监听 -->
  <component-a
    v-for="child in yourChildData"
    :key="child.id"
    :current="child"
    @change-parent-reactive-data="emitToParent" <!-- 关键：加上这个事件绑定 -->
  />
</template>

<script setup>
// 显式声明emit事件（可选但推荐，避免隐式emit的潜在问题）
const emits = defineEmits(['changeParentReactiveData'])

function emitToParent(id, data) {
  console.log("component A: ", id);
  emits("changeParentReactiveData", id, data);
}
</script>

额外检查项 #

1. 确保所有层级的组件A都通过defineEmits正确声明了changeParentReactiveData事件，显式声明能让Vue更好地处理事件传递，避免意外问题。
2. 确认递归渲染的子级A的props传递正确，保证组件实例正常渲染。

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