Vue 3 在每个孩子周围添加包装器

Question

我有一个表单组件如下：

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

我需要 FormComponent 才能在每个子项周围应用包装器 div

从上面的代码来看，FormComponent 的输出应该是这样的：

<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()

的内容。

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

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

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

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

Answer 2

是的，当我尝试在轮播组件中的每张幻灯片周围添加包装器时遇到了这个问题。起初看起来很复杂，文档也没有帮助，但当我弄清楚时，解决方案变得非常简单。

在你的例子中，表单组件在 Vue3 中应该是这样的

<form>
  <template v-for="(component, index) in $slots.default?.()" :key="index">
    <div v-for="(child, i) in component.children" :key="i" class="mb-3">
      <component :is="child" />
    </div>
  </template>
</div>