为每个子元素添加包装器的Vue 3操作-PHP中文网问答

微信公众号讲师中心

首页

文章

后端开发 web前端数据库开发工具 php框架常见问题科技 Java 系统教程电脑教程硬件教程手机教程软件教程游戏教程自媒体新闻

专题

后端开发 web前端数据库开发工具 php框架科技 Java 系统教程电脑教程硬件教程手机教程软件教程游戏教程新闻

AI工具

AI 聊天问答 Agent智能体 AI 文本写作 AI 绘画作图 AI 设计工具 AI 视频创作 AI 音频制作 AI 办公学习 AI 编程开发 Prompt指令

学习

大前端后端开发数据库移动端运维开发计算机基础

编程手册

大前端后端开发数据库移动端运维开发计算机基础

下载

js特效网站源码工具下载类库下载网站素材学习资源插件扩展手机/移动开发手机游戏

搜索

后端开发 web前端数据库开发工具 php框架常见问题科技 Java 系统教程电脑教程硬件教程手机教程软件教程游戏教程

为每个子元素添加包装器的Vue 3操作

P粉648469285 2024-01-02 16:58:52

[Vue.js讨论组]

1178

我有一个表单组件，如下所示：

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

P粉648469285

全部回复(1)

P粉4156323192024-01-03 09:29:49 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() 的内容。

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

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