用Props传递问卷题目列表实现答题渲染，核心是父组件通过ref/reactive响应式绑定结构化题目数组并校验类型，子组件用v-for+key按题型条件渲染，用户操作通过emit通知父组件更新答案而非修改props。
用 Props 传递问卷题目列表实现答题渲染，核心是让父组件把题目数据“安全、清晰、可响应”地交给子组件，子组件只负责展示和反馈操作，不修改原始数据。
父组件传题：结构化定义 + 响应式绑定
问卷题目通常为数组，每道题含 id、title、type（单选/多选/填空）、options（选项列表）等字段。父组件需确保传入的是响应式数据：
- 使用 ref 或 reactive 包裹题目列表，例如：
const questions = ref([{ id: 1, title: '你最喜欢的颜色？', type: 'radio', options: ['红','蓝','绿'] }]) - 通过
:questions="questions"绑定到子组件，避免直接传字面量（如questions="[...]"），否则失去响应性 - 若题目来自 API，应在数据就绪后再传入，防止子组件初始化时收到
undefined
子组件收题：类型校验 + 默认兜底
子组件用 defineProps 明确接收并约束题目结构，提升健壮性：
Vue Composition Analyzer
下载
分析 Vue 3 Composition API 使用情况——审计响应式模式、可组合函数设计、ref 与 reactive 的选择、计算属性、watcher 使用及组件……
- 声明 props 为对象形式，校验必填项与类型：
questions: { type: Array as PropType<Question[]>, required: true, default: () => [] } - 为每个题目字段加内层校验（如
title: { type: String, required: true }），避免渲染空标题或缺失选项 - 对
options等可能为空的字段设默认值：options: { type: Array, default: () => [] }
子组件渲染：v-for + key + 条件分支
根据题目类型动态渲染不同控件，保持 UI 与数据严格对应：
立即学习“前端免费学习笔记（深入）”；
- 用
v-for="(q, index) in questions" :key="q.id"遍历，必须用唯一 id 作 key，不用 index（避免增删题时状态错乱） - 用
v-if分支判断题型：v-if="q.type === 'radio'"渲染单选按钮，el-else-if="q.type === 'checkbox'"渲染多选，else渲染文本框 - 选项类题目用嵌套
v-for渲染<label>或<el-checkbox>，绑定v-model到本地响应式变量（如answers[q.id]）
用户作答反馈：emit 触发，不改 props
用户操作不直接修改 props，而是通知父组件更新答案状态：
- 单选题点击时：
@click="$emit('update-answer', { qid: q.id, value: option.value })" - 多选题用
@change="$emit('update-answer', { qid: q.id, value: selectedOptions })" - 父组件监听
@update-answer="handleAnswerChange"，在其中合并新答案、校验必答项、触发下一步等业务逻辑
