如何在渲染函数的父组件slot中获取特定的嵌套子组件？

Question

在父组件Parent中，我使用render函数来条件性地渲染子组件。示例如下：


   ... 
   ... 
   ...

在Parent组件的render函数中，有以下代码来实现条件性渲染子组件：

return () => {
  const content = slots.default?.();
  const children = content?.filter(child => child.type === Child);
  const childToRender = children?.[props.index] ?? h('div')
  return h('div', {}, () => [childToRender]);
}

这段代码按预期正常工作。

然而，我想将其中一个子组件用另一个组件包裹起来，如下所示：


   ... 
   ... 
   ...

其中ChildWrapper.vue看起来是这样的：

显然，由于过滤函数（content?.filter(child => child.type === Child)），它不会捕获到ChildWrapper组件内部的Child组件。

如果我检查ChildWrapper VNode的children属性，它显示的是一个包含默认插槽函数的对象，而不是我期望的包含Child组件的数组。所以我的问题是：如何获取嵌套的Child组件？

问题背景

假设父组件是一个Tab或Carousel组件，而子组件是一个TabItem或CarouselItem组件。我创建ChildWrapper组件的原因是为了扩展或覆盖默认Child组件的一些属性。父组件和子组件来自一个组件库，它们并不知道ChildWrapper的存在，因此父组件无法控制ChildWrapper应该如何渲染。

Snowcrash · Answer

两种方法：

创建一个状态变量（使用您所选择的状态管理器）：

// 伪代码示例
exports defineState({
  visibleChildType: 'type'
})

在父组件中，根据需要设置该状态值。

然后将条件渲染的判断逻辑从父组件移至子组件内部，并导入这个状态：

// ChildComponent.vue

将包裹组件移动到子组件自身内部：

// ChildComponent.vue

通过这种方式，子组件可以在必要时自行进行包装处理，而无需重构父组件。

tripleee · Answer

我认为，直接从父组件获取特定的、深层嵌套的子组件并不是一个推荐的做法，因为子组件可能嵌套多层，而不止一级。

在我看来，使用provide和inject可以更加顺畅地实现你的目标。

下面我将提供一个简单的例子来说明这一点：

父组件：

子组件（包括可能被ChildWrapper包裹住的Child组件）：

上述代码并不完整，但我相信已经传达了主要思路。