I have successfully implemented conditional rendering of a child component using the render function. Below is an example of the parent component with the child component:
<Parent :index="1">
<Child> ... </Child>
<Child> ... </Child>
<Child> ... </Child>
</Parent>
Within the render function of the Parent component, I have written code to conditionally render the child component as shown below:
return () => {
const content = slots.default?.();
const children = content?.filter(child => child.type === Child);
const childToRender = children?.[props.index] ?? h('div')
return h('div', {}, () => [childToRender]);
}
This code is functioning correctly.
However, I now want to wrap one of the child components with another component. For instance, like this:
<Parent :index="1">
<Child> ... </Child>
<ChildWrapper> ... </ChildWrapper>
<Child > ... </Child>
</Parent>
The ChildWrapper.vue component has the following structure:
<template>
<Child> <slot/> </Child>
</template>
It's evident that the filter function (
content?.filter(child => child.type === Child)Child component within the ChildWrapper component.
When I inspect the ChildWrapper VNode's children property, it shows an object (with the default slot function) rather than an array containing the Child component that I expected. So my question is: how can I access the nested Child component?
Context of the issue
Imagine the parent component being a Tab or a Carousel component, and the child component being a TabItem or a CarouselItem component. The purpose of creating a ChildWrapper component is to customize some of the properties in the default Child component. Since the parent and child components belong to a component library that is unaware of the existence of ChildWrapper, the parent component cannot control how ChildWrapper should be rendered.