为什么子组件拿到的Props是undefined：解决异步请求传参时机坑

子组件props为undefined的根本原因是数据异步未到达而组件已同步渲染；应通过watch监听props变化、v-if控制挂载时机、防御性访问等方式容错。

子组件拿到的 Props 是 undefined，根本原因不是“父组件没传”，而是数据还没到，子组件就已经渲染了。Vue 的渲染是同步的，而 API 请求是异步的——这两者天然存在时序差。子组件在 mounted 阶段看到的，只是 props 的初始值（比如未定义的对象、空数组或 null），而非最终数据。

父组件数据还没加载完，子组件就挂载了

Vue 生命周期中，子组件 mounted 触发得比父组件异步请求完成早得多。常见错误模式：

• 父组件在 mounted 或 onMounted 中发请求
• 子组件在自己的 mounted 里直接读 props.xxx —— 此时还是空值
• 后续父组件更新数据，props 确实变了，但子组件不会自动重跑 mounted

别依赖 mounted，改用 watch 监听变化

这是最常用也最稳妥的方式：让子组件主动响应 props 的到达和更新，而不是“赌”它一开始就有值。

• 用 watch(() => props.data, handler, { immediate: true })，immediate: true 确保首次赋值（哪怕是 undefined）也触发一次
• 在 handler 里加判空逻辑：if (newVal && newVal.id) { /* 安全使用 */ }
• 适合需要初始化图表、设置表单、触发子请求等副作用场景

v-if 控制子组件是否挂载

如果子组件完全无法处理空数据，或者内部有强依赖（比如第三方库初始化报错），就让子组件“晚点出场”。

• 父组件模板中：<ChildComponent v-if="userInfo" :user-info="userInfo" />
• 配合 loading 状态显示骨架屏或提示文字，体验更友好
• 注意：v-if 会销毁重建实例，不适合高频切换或带复杂内部状态的子组件

子组件内做防御性访问

即使数据迟到了，也不该让模板崩掉或 JS 报错。

• Prop 定义设默认值：default: () => ({}) 或 default: []
• 模板用可选链：{{ user?.name }} 或空值合并：{{ user?.email ?? '暂无邮箱' }}
• 计算属性或方法开头加守卫：if (!props.detail) return null

不复杂但容易忽略：异步通信的本质不是“怎么传”，而是“怎么容错”。