there is created self referencing component as following using name property.
It is using slots. which I need to pass to child node as well. there is looped child node as following.

<template>
<div>
<slot name=”filters”></slot>
<template v-if=”node.children && node.children.length”>
<node v-for=”child in node.children” :node=”child”>
</node>
</template>
</div>
</template>

<script lang=”ts”>
import { Component, Vue, Prop } from ‘vue-property-decorator’;

@Component({
name: ‘node’,
})
export default class TreeNode extends vue.js {

@Prop({ default: [] })
public node: any;
}
</script>

when using it as below.

<node-tree :node=”treeData”>
<template v-slot:filters>
<h1>Here might be a node content</h1>
</template>
</node-tree>

<script lang=”ts”>
import { Component, Vue, Prop } from ‘vue-property-decorator’;
import NodeTree from ‘./TreeNode.vue’;

@Component({
components: {
NodeTree,
})
export default class Tree extends vue.js {

//TODO: Following data is only for demo. Remove it. and set appropriate.
public treeData = {
label: ‘A cool folder’,
children: [
{
label: ‘A cool sub-folder 1’,
children: [
{ label: ‘A cool sub-sub-folder 1’ },
{ label: ‘A cool sub-sub-folder 2’ },
],
},
{ label: ‘This one is not that cool’ },
],
};
}
</script>

But child nodes are not displaying slot content. How do I pass them recursively.

Solution :

Following in treenode worked for me

<template v-if=”node.children && node.children.length”>
<node v-for=”child in node.children” :node=”child”>
<template v-for=”(_, slot) in $slots”>
<template :slot=”slot”>
<slot :name=”slot”></slot>
</template>
</template>
</node>
</template>