如何在Render函数中从父组件插槽获取嵌套子组件

原代码仅筛选父组件默认插槽的直接子节点，当Child被ChildWrapper这类组件嵌套后，就无法被检测到。要解决这个问题，需要递归遍历整个VNode树，同时处理插槽函数的执行，才能找到所有嵌套的Child组件。

实现思路 #

• 编写递归函数遍历所有VNode节点：
  1. 若当前节点是插槽函数（比如ChildWrapper的children），先执行函数获取实际的VNode列表
  2. 若当前节点是组件类型，检查是否为目标Child组件
  3. 递归处理节点的children（包括组件的默认插槽内容）
• 用递归函数替换原有的filter逻辑，收集所有符合条件的Child组件

具体代码实现 #

// 递归遍历VNode树，收集所有类型为targetComponent的节点
function collectTargetNodes(vnodes, targetComponent) {
  const result = [];
  if (!vnodes) return result;

  // 统一处理单个VNode或VNode数组
  const nodes = Array.isArray(vnodes) ? vnodes : [vnodes];

  for (const node of nodes) {
    // 跳过注释、文本等非组件节点
    if (!node || typeof node.type !== 'object') continue;

    // 检查当前节点是否是目标组件
    if (node.type === targetComponent) {
      result.push(node);
    }

    // 处理插槽函数（比如ChildWrapper的children是插槽函数）
    let childrenToProcess = null;
    if (typeof node.children === 'function') {
      // 执行插槽函数获取实际VNode
      childrenToProcess = node.children();
    } else {
      childrenToProcess = node.children;
    }

    // 递归处理子节点
    result.push(...collectTargetNodes(childrenToProcess, targetComponent));
  }

  return result;
}

// 在父组件的render函数中使用
return () => {
  const content = slots.default?.();
  // 替换原filter逻辑，用递归收集所有Child组件
  const children = collectTargetNodes(content, Child);
  const childToRender = children?.[props.index] ?? h('div');
  return h('div', {}, () => [childToRender]);
};

关键细节说明 #

• 插槽函数处理：ChildWrapper的children是插槽函数，必须执行它才能拿到实际的Child节点，这是原代码失效的核心原因
• 递归遍历：不管Child被多少层组件嵌套，递归函数都会深入遍历每一层VNode
• 类型判断：跳过文本、注释等非组件节点，只处理组件类型的VNode，避免无效遍历

适配第三方组件的注意事项 #

如果ChildWrapper是第三方组件，无法修改其内部逻辑，上述递归方案依然有效——因为它不依赖组件内部实现，只遍历最终生成的VNode树，只要第三方组件最终渲染了Child，就能被收集到。

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