Subscribe on changes!

Recursive inline templates

avatar
Apr 8th 2022

What problem does this feature solve?

Currently to create a recursive template you have to create a new component. This adds extra work for simple fragments of HTML that build recursive DOM. It would be cool if you could declare and use a sub-component template in the parent template, with direct access to the parent context in each node that gets rendered.

What does the proposed API look like?

Something like this, any syntax you come up with would be fine.

<template>
<div class="example">

<template v-name="list" v-props="{items}">
<ul>
  <li v-for="o in items">
    <div>
      <strong>{{o.name}}</strong>
      <button @click="view(o.id)">View</button>
    </div>
    <component
      v-if="o.subs"
      is="list"
      :items="o.subs"/>
  </li>
</ul>
</template>

<component is="list" :items="items"/>

</div>
</template>
avatar
Apr 8th 2022

This would require an extensive RFC, for which you can start a discussion here:

https://github.com/vuejs/rfcs