使用v-bind（或简写:）绑定响应式变量是子组件接收实时更新数据的关键，不加则传入静态字符串；需配合子组件props声明且仅响应式数据才具备更新能力。
在父组件模板中，用 v-bind（简写为 :）绑定响应式变量，是让子组件接收到实时、可更新数据的关键操作。不加 v-bind 会被当作静态字符串，导致类型错误或数据失活。
必须用 v-bind 触发动态求值
Vue 模板里所有 prop 值默认是字符串字面量。只有显式使用 v-bind，Vue 才会把右侧表达式当 JavaScript 代码执行，取到真正的响应式值：
- ❌ 错误写法（传的是字符串
"userInfo"）：<UserCard userInfo="userInfo" /> - ✅ 正确写法（传的是
userInfo变量的响应式对象）：<UserCard :userInfo="userInfo" /> - 等价于完整写法：
<UserCard v-bind:userInfo="userInfo" />
支持多种响应式来源
只要右侧是 Vue 的响应式数据，:propName 就能正确传递并保持更新：
- ref 或 reactive 定义的数据：
:user="userRef"、:config="reactiveConfig" - 计算属性返回值：
:title="computedTitle" - 方法调用（建议简单逻辑）：
:label="getLabel(type)" - 三元表达式：
:disabled="isEditing ? false : true"
配合子组件 props 声明才生效
父组件绑定了，子组件也得“认领”这个 prop，否则值不会进入组件内部：
- 选项式 API：
props: ['userInfo', 'title']或props: { userInfo: Object, title: String } - 组合式 API：
defineProps(['userInfo', 'title'])或带类型校验的对象形式 - 没声明的字段会被忽略，控制台会发出警告
注意响应性边界
传的是响应式对象或数组时，内部属性修改（如 user.name = '新名字'）能触发子组件更新；但若传的是普通对象（const obj = { name: 'a' }），改了也不会更新。
