Vue 组件通信如何通过 Props 传递问卷调查题目列表进行答题渲染

用Props传递问卷题目列表实现答题渲染，核心是父组件通过ref/reactive响应式绑定结构化题目数组并校验类型，子组件用v-for+key按题型条件渲染，用户操作通过emit通知父组件更新答案而非修改props。

用 Props 传递问卷题目列表实现答题渲染，核心是让父组件把题目数据“安全、清晰、可响应”地交给子组件，子组件只负责展示和反馈操作，不修改原始数据。

父组件传题：结构化定义 + 响应式绑定

问卷题目通常为数组，每道题含 id、title、type（单选/多选/填空）、options（选项列表）等字段。父组件需确保传入的是响应式数据：

1. 使用 ref 或 reactive 包裹题目列表，例如：const questions = ref([{ id: 1, title: '你最喜欢的颜色？', type: 'radio', options: ['红','蓝','绿'] }])
2. 通过 :questions="questions" 绑定到子组件，避免直接传字面量（如 questions="[...]"），否则失去响应性
3. 若题目来自 API，应在数据就绪后再传入，防止子组件初始化时收到 undefined

子组件收题：类型校验 + 默认兜底

子组件用 defineProps 明确接收并约束题目结构，提升健壮性：

1. 声明 props 为对象形式，校验必填项与类型：questions: { type: Array as PropType<Question[]>, required: true, default: () => [] }
2. 为每个题目字段加内层校验（如 title: { type: String, required: true }），避免渲染空标题或缺失选项
3. 对 options 等可能为空的字段设默认值：options: { type: Array, default: () => [] }

子组件渲染：v-for + key + 条件分支

根据题目类型动态渲染不同控件，保持 UI 与数据严格对应：

1. 用 v-for="(q, index) in questions" :key="q.id" 遍历，必须用唯一 id 作 key，不用 index（避免增删题时状态错乱）
2. 用 v-if 分支判断题型：v-if="q.type === 'radio'" 渲染单选按钮，el-else-if="q.type === 'checkbox'" 渲染多选，else 渲染文本框
3. 选项类题目用嵌套 v-for 渲染 <label> 或 <el-checkbox>，绑定 v-model 到本地响应式变量（如 answers[q.id]）

用户作答反馈：emit 触发，不改 props

用户操作不直接修改 props，而是通知父组件更新答案状态：

1. 单选题点击时：@click="$emit('update-answer', { qid: q.id, value: option.value })"
2. 多选题用 @change="$emit('update-answer', { qid: q.id, value: selectedOptions })"
3. 父组件监听 @update-answer="handleAnswerChange"，在其中合并新答案、校验必答项、触发下一步等业务逻辑