Ini penyelesaiannya:

const formChildren = [{
  name: 'test1',
  is: TextComponent  
}, {
  name: 'test2',
  is: SelectComponent  
}]

<form-component :children="formChildren" />

FormComponent.vue

<template>
  <form>
    <div 
      v-for="(child, index) in children"
      :key="index"
      class="mb-3"
    >
      <component v-bind="child" />
    </div>
  </form>
</template>
<script setup>
defineProps(['children'])
</script>

Ini ialah demo yang berfungsi tentang perkara yang anda cadangkan dalam ulasan, mengulang $slots.default() kandungannya.

Jika anda lebih suka menulis logik anda dalam sintaks templat, itu cara yang betul dan saya tidak nampak apa-apa yang salah dengan itu.

Saya secara peribadi lebih suka pendekatan pertama, kerana kecenderungan saya adalah (biasanya) mengekalkan sintaks templat pada tahap minimum. Menyimpan komponen dalam objek atau struktur pemetaan membolehkan saya mempunyai kawalan yang baik dan mengautomasikan tugas seperti:

• Sahkan
• Pengurusan Acara
• Gunakan lalai dinamik daripada objek konfigurasi
• Mengendalikan pengecualian penyemak imbas/peranti

Keutamaan saya mungkin datang daripada bekerja banyak dalam persekitaran dipacu konfigurasi, di mana logik perniagaan biasanya disimpan dalam objek. Tidak ada yang salah dengan menulisnya dalam sintaks templat, tetapi secara keseluruhan saya mendapati ia mengehadkan.