16 Jan 2023
In situations where a nested UI with unknown depth is needed, a recursive component that can call itself can be handy, think of Reddit comments for example.
Consider a parent Tree component and a child Branch component, any Branch might have a Branch of its own and so fourth down the line, am using SFCs here for easier readability where the name of the recursive component is inferred from the file name by the Vue loader when bundling with WebPack or the Vue plugin for Rollup based Vite bundler.
Tree.vue
<script setup>
import { ref } from "vue";
import Branch from "./Branch.vue";
const data = ref({
name: "Tree",
nodes: [
{ name: "Grandfather" },
{ name: "Grandmother" },
{
name: "Parents",
nodes: [
{
name: "Father",
nodes: [{ name: "brother" }, { name: "sister" }],
},
{ name: "Uncle" },
{ name: "Aunt" },
{
name: "Mother",
nodes: [{ name: "niece" }, { name: "nephew" }],
},
],
},
],
});
</script>
<template>
<ul>
<Branch class="item" :node="data" />
</ul>
</template>
Now the branch component can call itself passing the node object as a prop and iterating through its child nodes
Branch.vue
<script setup>
defineProps({
node: Object,
});
</script>
<template>
<li>
<ul>
<Branch :node="node" v-for="node in node.nodes" />
</ul>
</li>
</template>
Get in touch_