插槽实现问卷选项卡片个性化定制，通过默认插槽处理线性内容、具名插槽划分多区域、作用域插槽传递内部数据，三者组合支撑单选、多选等各类题型复用。
用插槽实现问卷题目选项卡片的个性化定制，核心是把“固定结构”和“可变内容”解耦。选项卡片通常有统一的容器样式（如边框、间距、选中态），但内部文字、图标、布局甚至交互控件需要按题型灵活替换——插槽正是为此而生。
默认插槽：填空题与单行文本项的轻量定制
适合标题、提示语、输入框等线性内容。子组件只留一个 <slot></slot>，父组件直接传入所需结构。
- 子组件（OptionCard.vue）中定义：
<div class="option-card"><slot></slot></div> - 父组件调用时可传纯文本：
<OptionCard>请输入您的邮箱</OptionCard> - 也可传带样式的元素：
<OptionCard><span style="color:#666">（必填）</span>手机号</OptionCard> - 甚至嵌套 input 或 el-input：
<OptionCard><el-input v-model="form.phone" placeholder="请输入"></el-input></OptionCard>
具名插槽：多区域独立控制（如单选/多选题）
当卡片需区分“标签区”“选项区”“操作区”时，用 name 明确划分。比如一个标准单选题卡片：
- 子组件内定义：
<slot name="label"></slot>（用于题干）、<slot name="options"></slot>（用于 radio 列表）、<slot name="action"></slot>（用于“其他”输入框或帮助图标） - 父组件用
v-slot:xxx或简写#xxx精准投递：<OptionCard><template #label>您最常使用的开发工具？</template><template #options><el-radio v-for="item in tools" :key="item" :label="item">{{ item }}</el-radio></template></OptionCard> - 这样每个区域互不干扰，改题干不影响选项渲染逻辑，加“其他”输入框也无需修改子组件模板
作用域插槽：让父组件访问子组件内部数据（如动态生成选项）
当选项列表由子组件根据题型参数（如 type="checkbox"）自动计算生成，但渲染方式要由父组件决定时，就需传递数据上下文。
立即学习“前端免费学习笔记（深入）”；
- 子组件中：
<slot name="options" :items="computedOptions" :selected="currentValue"></slot> - 父组件使用时解构传入的数据：
<template #options="{ items, selected }"><el-checkbox v-for="opt in items" :key="opt.value" v-model="selected" :label="opt.label"></el-checkbox></template> - 这样既复用了子组件的选项过滤/排序逻辑，又保留了父组件对 UI 细节（如是否显示图标、如何排版）的完全控制权
结合问卷实际场景的组合用法
一个完整的选择题卡片往往混合使用多种插槽。例如：“喜欢的编程语言”题，需展示题干 + 多选按钮 + “其他”输入框 + 实时校验提示：
- 题干用
#label插槽 - 多选按钮用
#options具名插槽 - “其他”输入框用
#other插槽，并通过作用域插槽传入showOther状态 - 错误提示用
#error插槽，由父组件根据表单验证结果动态决定是否渲染
这种设计让同一张卡片组件能支撑单选、多选、带其他项、带子问题等多种题型，而无需为每种类型单独写一个组件。
