Codex生成前端组件时必须显式声明组件关系与通信方式，否则缺失props、事件或状态同步逻辑；需在提示词中明确“父传子”“子传父”或“兄弟通信”，并指定Vue3 Composition API或React Hooks的具体实现要求。

☞☞☞AI 智能聊天, 问答助手, AI 智能搜索, 多模态理解力帮你轻松跨越从0到1的创作门槛☜☜☜

用Codex生成前端组件时，若组件间存在数据依赖关系，必须显式声明传值方式，否则生成的代码会缺失props定义、事件绑定或状态同步逻辑，导致运行时报错或数据不更新。

明确告诉Codex组件关系类型

在提示词中必须写清“父传子”“子传父”或“兄弟通信”，不能只说“组件要能交换数据”。Codex不会自动推断通信模式，它严格按指令生成对应结构。

方法一：直接在需求描述里嵌入通信关键词
例如：“生成一个Vue3表格组件，作为子组件接收父组件传入的items数组（类型为Item[]），并支持通过update:selection向父组件回传选中项ID列表。”

方法二：用分段指令强制结构约束
第一步：先声明父组件需暴露userList响应式数据和onUserSelect回调函数；
第二步：再要求子组件以props: { userList: { type: Array as PropType<User[]>, required: true } }接收，并用emit('update:selection', ids)触发更新。

立即学习“前端免费学习笔记（深入）”；

【关键前提】Codex无法从UI截图或模糊描述中识别组件层级，必须用文字明确写出“父组件”“子组件”“兄弟组件”等关系词，否则默认生成独立无依赖组件。

Vue场景下自动生成符合Composition API规范的传值代码

Codex对Vue3的<script setup>语法有深度适配，能自动补全类型、校验和响应式处理。</script>

步骤一：在提示词中指定使用defineProps和defineEmits
例如：“用