Tindakan Vue 3 untuk menambah pembalut bagi setiap elemen anak

Question

Saya mempunyai komponen borang seperti yang ditunjukkan di bawah:

<form-component>
    <text-component name="test1" />
    <select-component name="test2" />
</form-component>

Saya memerlukan FormComponent untuk menggunakan div pembalut di sekeliling setiap kanak-kanak

Daripada kod di atas, output FormComponent hendaklah seperti ini:

<form>
    <div class="mb-3">
        <text-component name="test1" />
    </div>

    <div class="mb-3">
        <select-component name="test2" />
    </div>
</form>

Answer 1

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.