javascript - Vue 3 为每个 child 添加包装器

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>

---

这是一个 working demo根据您在评论中提出的建议，循环遍历 $slots.default() 的内容。

如果您更喜欢用模板语法编写逻辑，那是正确的选择，我看不出有什么问题。

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

• 验证
• 事件管理
• 应用来自配置对象的动态默认值
• 处理浏览器/设备问题

我的偏好可能来自于在配置驱动环境中工作过很多次，其中业务逻辑通常存储在对象中。虽然用模板语法编写它没有错，但总的来说，我发现它有局限性。