title: How to declare a list of slots with dynamic names and dynamic components in a VueJS template?
body: <p>Suppose I have a component with data:</p>
  <pre class="lang-js prettyprint-override"><code>data: function () {
    return {
      slots: [
        { Id: 1, slotName: 'apple', componentName: 'Apple' },
        { Id: 2, slotName: 'banana', componentName: 'Banana' }
      ]
    }
  }
  </code></pre>
  <p>and I want to pass the list of slots as scoped slots to a child component. The following syntax won't work because you cannot use v-for on a template element:</p>
  <pre class="lang-html prettyprint-override"><code>&lt;child-component&gt;
      &lt;template v-for=&quot;slot in slots&quot; :key=&quot;slot.Id&quot; v-slot[slot.slotName]=&quot;slotProps&quot;&gt;
          &lt;component :is=&quot;slot.componentName&quot; :someProp=&quot;slotProps&quot;&gt;&lt;/component&gt;
      &lt;/template&gt;
  &lt;/child-component&gt;
  </code></pre>
  <p>and the following syntax won't work because in Vue 2.6.0+ <a href="https://v2.vuejs.org/v2/guide/components-slots.html#Named-Slots" rel="nofollow noreferrer"><code>any content not wrapped in a &lt;template&gt; using v-slot is assumed to be for the default slot</code></a>.</p>
  <pre class="lang-html prettyprint-override"><code>&lt;child-component&gt;
      &lt;component v-for=&quot;slot in slots&quot; :key=&quot;slot.Id&quot;
          :is=&quot;slot.componentName&quot; v-slot[slot.slotName]=&quot;slotProps&quot; :someProp=&quot;slotProps&quot;&gt;&lt;/component&gt;
  &lt;/child-component&gt;
  </code></pre>
  <p>The following <em>will</em> work but the compiler throws a warning and it uses deprecated syntax:</p>
  <pre class="lang-html prettyprint-override"><code>&lt;child-component&gt;
      &lt;component v-for=&quot;slot in slots&quot; :key=&quot;slot.Id&quot;
          :is=&quot;slot.componentName&quot; :slot=&quot;slot.slotName&quot; slot-scope=&quot;slotProps&quot; :someProp=&quot;slotProps&quot;&gt;&lt;/component&gt;
  &lt;/child-component&gt;
  </code></pre>
  <p>Is there any way to achieve this using non-deprecated Vue template syntax and without using a render function?</p>