Vue Props 动态绑定的核心是传递响应式数据（ref/reactive或其衍生计算值），仅用 v-bind（:）绑定静态值或普通对象无法触发更新；子组件响应性完全依赖父组件所传源数据的响应式状态。
Vue Props 动态绑定的核心，是让子组件能实时感知并响应父组件中响应式数据的变化。关键不在“怎么写”，而在于“传的是什么”——只有传递 响应式引用（ref/reactive）或依赖它们的计算值，更新才会自动触发。
动态绑定必须用 v-bind（:）
静态写法如 <Child title="Hello"> 传的是固定字符串，子组件收不到后续变化。真正实现联动，必须显式使用 v-bind 或其缩写 :：
-
<Child :title="pageTitle" />—— 绑定 ref 变量，pageTitle.value改变，子组件立刻更新 -
<Child :is-active="user.status === 'online'" />—— 绑定表达式，只要user.status变，结果重算、子组件重渲染 -
<Child v-bind="userInfo" />—— 批量绑定 reactive 对象，对象内任意属性变化都触发响应
响应式数据必须来自父组件顶层作用域
子组件无法追踪局部变量或非响应式对象的变化。常见失效场景：
vue-component-analyzer
下载
递归分析 Vue 项目组件依赖，从入口文件生成组件层级图，支持 Vue 2/3，输出组件名、文件路径和属性。适用于分析组件结构、排查依赖或了解项目架构。
- ❌
const localName = 'Tom'; <Child :name="localName" />—— 普通常量，无响应性 - ❌
let obj = { age: 25 }; <Child :user="obj" />—— 普通对象，修改obj.age不触发更新 - ✅
const user = reactive({ age: 25 }); <Child :user="user" />—— reactive 代理后，内部属性变化可被追踪 - ✅
const count = ref(0); <Child :count="count" />—— ref 被解包，传入的是count.value的响应式链接
子组件需正确定义 props 类型与结构
类型声明不是摆设，它影响 Vue 如何解析和代理传入值：
立即学习“前端免费学习笔记（深入）”；
- 基础类型（String/Number/Boolean）：支持浅层响应，值变更即更新
- Object 或 Array 类型：必须配合
reactive或ref使用，否则内部属性变化不响应 - 推荐用对象形式声明，启用校验和默认值：
defineProps({ name: { type: String, required: true }, config: Object })
避免常见陷阱：深层嵌套与默认值
当传入对象时，子组件直接访问 props.user.name 是安全的——Vue3 的响应式系统会递归代理 reactive 对象的嵌套属性。但要注意：
- 如果父组件传的是
ref({ name: 'Alice' })，子组件接收后仍可响应name变化 - 若 props 定义了默认值且类型为引用类型（如 Object），必须用工厂函数：
config: { type: Object, default: () => ({ theme: 'light' }) }，防止多个实例共享同一对象 - 计算属性也可作为 prop 传入：
:value="computedTotal"，依赖项一变，子组件同步更新
