There is a scenario where I need to create a functional component for a specific purpose. The task at hand involves taking all the children elements and adding some additional props to them, but only to those that are custom components of type ChildComponent. Here is my approach:
MySpecialComponent.vue
render: function(createElement, context){
const preparedChildrenLevel1 = context.children.map(child => {
if(child.componentOptions.tag !== "ChildComponent"){
return child;
}
return createElement(
ChildComponent,
{
props: {
...child.componentOptions.propsData,
level1: "level1"
}
},
child.componentOptions.children
)
});
},
This method works well. However, when I try to further iterate through the preparedChildrenLevel1 array to add another prop to the children components of type ChildComponent, I encounter an issue where child.componentOptions.tag returns undefined.
MySpecialComponent.vue
render: function(createElement, context){
//First level of adding props to children
const preparedChildrenLevel1 = context.children.map(child => {
//Here, child.componentOptions.tag is 'ChildComponent'
if(child.componentOptions.tag !== "ChildComponent"){
return child;
}
return createElement(
ChildComponent,
{
props: {
...child.componentOptions.propsData,
level1: "level1"
}
},
child.componentOptions.children
)
});
//Second level of adding props to children
const preparedChildrenLevel2 = preparedChildrenLevel1.map(child => {
//Here, child.componentOptions.tag is now 'undefined'
if(child.componentOptions.tag !== "ChildComponent"){
return child;
}
return createElement(
ChildComponent,
{
props: {
...child.componentOptions.propsData,
level2: "level2"
}
},
child.componentOptions.children
)
});
},
I require this hierarchical access to such specific components across multiple levels.
Note: Below is the complete implementation of the component and how it is utilized.
MySpecialComponent.vue
<script>
export default {
name: "MySpecialComponent",
functional: true,
render: function(createElement, context){
//First level of adding props to children
const preparedChildrenLevel1 = context.children.map(child => {
//In here, child.componentOptions.tag equals 'ChildComponent'
if(child.componentOptions.tag !== "ChildComponent"){
return child;
}
return createElement(
ChildComponent,
{
props: {
...child.componentOptions.propsData,
level1: "level1"
}
},
child.componentOptions.children
)
});
//Second level of adding props to children
const preparedChildrenLevel2 = preparedChildrenLevel1.map(child => {
//Now, child.componentOptions.tag is 'undefined'
if(child.componentOptions.tag !== "ChildComponent"){
return child;
}
return createElement(
ChildComponent,
{
props: {
...child.componentOptions.propsData,
level2: "level2"
}
},
child.componentOptions.children
)
});
},
}
</script>
MainApp.vue
<template>
<MySpecialComponent>
<p>child1</p>
<p>child2</p>
<ChildComponent :level0="level0">child3</ChildComponent>
<p>child4</p>
<ChildComponent :level0="level0">child5</ChildComponent>
<ChildComponent :level0="level0">child6</ChildComponent>
</MySpecialComponent>
</template>