Vue 3-Aktion zum Hinzufügen eines Wrappers für jedes untergeordnete Element

Question

Ich habe eine Formularkomponente wie unten gezeigt:

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

Ich benötige die FormComponent, um um jedes untergeordnete Element ein Wrapper-Div anzubringen

Aus dem obigen Code sollte die Ausgabe von FormComponent wie folgt aussehen:

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

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

Answer 1

这是一种解决方法：

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>

---

这是工作演示 您在评论中提出的建议，循环遍历 $slots.default() 的内容。

如果您更喜欢用模板语法编写逻辑，那就是正确的方法，我认为这没有什么问题。

我个人更喜欢第一种方法，因为我的倾向是（通常）将模板语法限制到最少。将组件保留在对象或映射结构中使我能够进行精细控制并自动执行任务，例如：

• 验证
• 活动管理
• 应用来自配置对象的动态默认值
• 处理浏览器/设备异常

我的偏好可能来自于在配置驱动的环境中进行了大量工作，其中业务逻辑通常存储在对象中。用模板语法编写它并没有什么问题，但总的来说，我发现它有限制。