<template>
<h1>{{ message }}</h1>
<div v-for="item in list" :key="item.value"> {{ item.text }}: {{ item.value }} </div>
<render v-render:renderA="[tree, 'text']" />
</template>
<template name="renderA" :arg="[item, key]">
<h1>{{ message }}</h1>
<div>{{ item[key] }}</div>
<template v-for="(child, index) in item.children" :key="index">
<render v-render:renderA="[child, key]" />
</template>
</template>
<template>
<h1>{{ message }}</h1>
<div v-for="item in list" :key="item.value"> {{ item.text }}: {{ item.value }} </div>
<render name="renderA" :arg="[tree, 'text']" />
</template>
<template v-render:renderA="[item, key]">
<h1>{{ message }}</h1>
<div>{{ item[key] }}</div>
<template v-for="(child, index) in item.children" :key="index">
<render name="renderA" :arg="[child, key]" />
</template>
</template>
<template>
<h1>{{ message }}</h1>
<div v-for="item in list" :key="item.value"> {{ item.text }}: {{ item.value }} </div>
<render v-render:renderA="[tree, 'text']" />
</template>
<template name="renderA" :arg="[item, key]">
<h1>{{ message }}</h1>
<div>{{ item[key] }}</div>
<template v-for="(child, index) in item.children" :key="index">
<render v-render:renderA="[child, key]" />
</template>
</template>
<script setup>
const message = ref('Hello World!');
const list = ref([
{
text: 'listA',
value: 'valueA',
},
{
text: 'listB',
value: 'valueB',
},
{
text: 'listC',
value: 'valueC',
},
]);
const tree = ref({
level: 'level1',
text: 'tree1',
children: [
{
level: 'level2',
text: 'tree2-1',
children: [
{
level: 'level3',
text: 'tree3-1',
},
{
level: 'level3',
text: 'tree3-2',
},
{
level: 'level3',
text: 'tree3-3',
},
],
},
{
level: 'level2',
text: 'tree2-2',
},
],
});
</script>
<style scoped lang="less"></style>
