Vue递归树组件子节点emit事件不触发问题排查

核心问题分析 #

你的递归组件中，子节点触发的node-clicked事件无法传递到顶层宿主，根源在于事件处理逻辑错误修改了参数结构，且未正确转发子组件事件：

• 根节点点击时，直接调用nodeClicked并emit事件，参数结构正确，能正常传递到顶层；
• 子节点点击时，父组件通过nodeClicked($event, citem)捕获事件，此时再次emit的参数是[$event, citem]（而$event本身已是子组件传来的[e, node]），参数结构被破坏，孙节点的事件会被中间层错误处理，无法继续向上传递。

解决方案 #

方案1：拆分自身点击与子组件事件转发 #

将自身节点点击处理和子组件事件转发分开，子组件事件直接原封不动向上emit：

修改后的模板代码

<template>
  <div>
    <div>
      <!-- 自身节点点击调用单独处理方法 -->
      <span @click="handleNodeClick($event, localValue)">
        {{ localValue.name }}
      </span>
    </div>

    <div v-if="open && value.children.length > 0">
      <CustomTreeNode
        v-for="citem in localValue.children"
        :key="citem.id"
        :value="citem"
        :selected="citem.selected"
        <!-- 直接转发子组件的node-clicked事件 -->
        @node-clicked="$emit('node-clicked', $event)"
      />
    </div>
  </div>
</template>

修改后的事件处理代码

const handleNodeClick = (e: Event, node: ITreeNode) => {
  console.log(`KTREENODE: nodeClicked() called with item ${node.name}`)
  emit('node-clicked', [e, node])
  console.log(`    KETREENODE: after emit() called after [${node.name}] node clicked`)
}

方案2：单方法统一处理逻辑 #

如果希望保留单个方法，可通过参数解构保持结构一致：

修改后的模板代码

<template>
  <div>
    <div>
      <span @click="nodeClicked($event, localValue)">
        {{ localValue.name }}
      </span>
    </div>

    <div v-if="open && value.children.length > 0">
      <CustomTreeNode
        v-for="citem in localValue.children"
        :key="citem.id"
        :value="citem"
        :selected="citem.selected"
        <!-- 解构子组件传递的事件参数 -->
        @node-clicked="nodeClicked(...$event)"
      />
    </div>
  </div>
</template>

修改后的事件处理代码

const nodeClicked = (e: Event, node: ITreeNode) => {
  console.log(`KTREENODE: nodeClicked() called with item ${node.name}`)
  emit('node-clicked', [e, node])
  console.log(`    KETREENODE: after emit() called after [${node.name}] node clicked`)
}

这种写法中，子组件emit的[e, node]会被解构为两个参数，和自身点击的参数结构一致，实现统一处理并正确向上传递。

效果验证 #

修改后，根节点、子节点、孙节点的点击事件都会逐层向上传递到顶层宿主，参数结构保持一致，不会出现事件丢失的情况。

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