<template>
<ul>
<li v-for="item in items" :key="item.id">
{{ item.name }}
<RecursiveList v-if="item.children" :items="item.children" />
</li>
</ul>
</template>
<script setup>
import { defineProps } from 'vue'
const props = defineProps({ items: Array })
</script>The component renders a nested unordered list. Each item with children renders a nested <ul> inside its <li>. Option D correctly shows this nested structure.
<template>
<div>
<TreeNode v-if="node.children" :node="child" v-for="child in node.children" :key="child.id" />
<span>{{ node.name }}</span>
</div>
</template>
<script setup>
import { defineProps } from 'vue'
const props = defineProps({ node: Object })
// How to register TreeNode recursively?
</script>In Vue 3, a component can recursively call itself by its own name without needing to register itself inside the components option. So no explicit registration is needed.
<template>
<div>
<RecursiveComp v-if="true" />
</div>
</template>
<script setup>
import RecursiveComp from './RecursiveComp.vue'
</script>The component calls itself every time without any condition to stop, causing infinite recursion and stack overflow.
<template>
<div>
<button @click="increment">Click me</button>
<p>Count: {{ count }}</p>
<RecursiveCounter v-if="depth < 2" :depth="depth + 1" />
</div>
</template>
<script setup>
import { ref, defineProps } from 'vue'
const props = defineProps({ depth: { type: Number, default: 0 } })
const count = ref(0)
function increment() {
count.value++
}
</script>Each recursive instance has its own count ref. Clicking the button in one instance only increments that instance's count. After two clicks on the root button, count is 2 for that instance.
Vue 3 allows a component to call itself recursively by its own name without needing explicit registration or global registration. This simplifies recursive component usage.