动态组件传递props需确保类型一致、响应式不丢失且兼容keep-alive：静态/动态绑定均可透传，子组件须统一声明prop类型；v-bind批量传递时应配合computed保持响应式；keep-alive下需用onActivated或watch手动同步更新。
在动态组件中安全传递属性集合，关键不是“能不能传”，而是“怎么传才不丢、不报错、不意外”。核心原则是：把 props 当作普通组件一样绑定，但要特别注意类型一致性、响应式更新和 keep-alive 下的生命周期行为。
✅ 动态组件中 props 的基础绑定方式
使用 <component :is="targetComp"></component> 时，所有写在标签上的 prop（包括 v-bind 展开）都会原样透传给当前激活的子组件：
- 静态值直接写：
<component :is="current" title="用户管理"></component> - 动态值用
:绑定：:user="currentUser" :loading="isLoading" - 批量传对象：
v-bind="configObj"，等价于把configObj每个字段当 prop 传入
✅ 类型安全与子组件声明必须匹配
动态切换的每个组件，只要接收相同 key 的 prop（比如都收 user），就必须在各自内部用 defineProps 明确声明——且类型建议一致。否则：
Antd Vue Components
下载
学习并查找 ant-design-vue（Vue 3）组件的使用方式，包括变体、运行示例、Vue 3 SFC 代码以及关键 props/events/slots。当用户询问如何使用 ant-design-vue 时使用。
- 若 A 组件声明
user: Object，B 组件声明user: String，而父组件传的是对象，B 组件运行时可能取值异常或控制台警告 - 推荐统一用对象声明 + 类型校验：
user: { type: Object as PropType<user>, required: true }</user> - 对可选或类型多变的字段，可用联合类型：
status: { type: [String, Number] as PropType }
✅ 响应式数据传递要避免“引用丢失”
当通过 v-bind="obj" 批量传参时，如果 obj 是 ref 或 reactive，子组件接收到的是解包后的原始值（非响应式副本）。正确做法：
立即学习“前端免费学习笔记（深入）”；
- 保持顶层响应式：用
:user="userRef"而不是v-bind="{ user: userRef }" - 需要批量且响应式？用计算属性包裹：
const boundProps = computed(() => ({ user: userRef.value, meta: metaRef.value }))，再v-bind="boundProps" - 子组件内需监听变化？用
watch监听 props，或直接用computed衍生依赖
✅ keep-alive 场景下的注意事项
加了 <keep-alive></keep-alive> 后，组件实例被缓存，props 不会自动更新（除非显式触发）。常见问题：
- 切换 tab 后，新数据没进到已缓存的组件里 → 在
onActivated钩子中手动同步：onActivated(() => { props.user = latestUser }) - 多个动态组件共用同一份 props 数据，但缓存状态互相干扰 → 给每个组件加唯一
key：<component :is="comp" :key="compName" v-bind="data"></component> - 想让缓存组件响应父级 props 变化？结合
watch+defineExpose暴露更新方法，由父组件主动调用
